La règle CSS @scope offre une solution native pour isoler finement les styles en limitant l’application des règles à un sous-arbre spécifique du DOM, ce qui évite que les styles d’un composant se propagent ailleurs tout en gardant une spécificité faible et une meilleure maintenabilité du code ; l’article montre comment cibler uniquement certains éléments comme des <h2> dans des .card, explique l’usage des pseudo-classes :scope et de l’esperluette & pour référencer la racine de portée, et souligne des avantages comme la robustesse face aux modifications du DOM par rapport à des sélecteurs classiques.

L'article de Blake Lundquist sur Smashing Magazine explore l'utilisation de la nouvelle règle CSS @scope comme alternative aux conventions de nommage rigides (comme BEM) et aux abstractions lourdes (comme les frameworks CSS-in-JS). Il souligne les défis de maintenir des styles CSS dans des interfaces complexes, où les styles fuient souvent vers des zones non intentionnelles, entraînant des sélecteurs de plus en plus spécifiques. Les conventions de nommage comme BEM peuvent aider, mais elles sont souvent difficiles à maintenir dans des applications interactives. Les développeurs se tournent alors vers des frameworks comme Tailwind pour éviter la cascade CSS. Cependant, cette approche a aussi ses inconvénients, comme des configurations de build lourdes et des styles mélangés avec le markup. L'auteur suggère que @scope pourrait offrir une solution plus élégante en permettant de scoper les styles de manière plus intuitive et maintenable.

Tout est dans le titre