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.
Dans cet article de HTMHell, Darice de Cuba explique l'importance de nommer les classes CSS de manière générique et indépendante du design. Elle souligne que les noms de classes doivent refléter le contenu et non la présentation, afin de faciliter les modifications futures du CSS sans toucher au HTML. Elle donne des exemples de bonnes et mauvaises pratiques, et conclut en insistant sur l'importance de maintenir un code lisible et facile à modifier.
L'auteur partage sa stratégie pour concevoir des mises en page avec CSS, en insistant sur l'importance de partir du contenu plutôt que d'un conteneur prédéfini. Il explique comment choisir la grille adaptée (12 colonnes, grille composée, modulaire, ou aucune) en fonction des besoins du projet, et comment définir et réutiliser ces grilles de manière cohérente à travers un site. Il utilise des attributs de données pour nommer et réutiliser rapidement des arrangements d'éléments enfants, favorisant ainsi une approche systématique et efficace.
Tout est dans le titre
Tout est dans le titre