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

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.