Bonne pratique
Utiliser les compartiments CSS
Ce que dit le référentiel
Le CSS Containment (ou compartimentation CSS) indique qu'un nœud et son contenu sont, autant que possible, indépendants du reste de l'arborescence de la page.
En fonction du type d'indépendance (strict, content, size, layout, style et/ou paint) de la propriété contain, le navigateur :
- recalcule le rendu (les positions, la mise en forme, les dispositions et/ou l'affichage) pour le seul nœud indépendant économisant ainsi, de recalculer l’entièreté du DOM de la page
- ne fait pas le rendu du contenu des nœuds indépendants hors zone visible
Le "Référentiel d'écoconception web (REW)" est publié par GreenIT.fr dans le cadre des travaux du Collectif conception numérique responsable selon les termes de la licence Creative Commons Attribution.
Notre avis
Tailwind CSS encourage l'utilisation de classes utilitaires qui isolent les styles au niveau des composants. Cela aide à maintenir un DOM léger et bien structuré, facilitant ainsi la mise en œuvre de CSS Containment pour réduire les recalculs de rendu.
Grâce à une conception modulaire, Tailwind permet de créer des composants isolés facilement. Cela s'aligne parfaitement avec la pratique du containment puisque les styles ne « fuient » pas, optimisant ainsi l'efficience du DOM et réduisant la charge de calcul des navigateurs.
Règle de validation
Le nombre d'éléments non isolés doit être inférieur ou égal à 20%
Ressources économisées