L’article explore les défis liés à la mise à l’échelle des View Transitions entre documents, notamment pour des pages affichant des centaines d’éléments comme une grille de produits. Après avoir résolu les problèmes initiaux (métadonnées obsolètes, délais de timeout, etc.), l’auteur souligne que les tutoriels classiques, conçus pour des transitions simples, échouent face à des cas complexes. La solution idéale, purement CSS, reposerait sur des fonctions comme ident() et sibling-index() pour générer automatiquement des noms uniques, mais cette approche n’est pas encore implémentée dans les navigateurs.
En attendant, les développeurs doivent recourir à des méthodes manuelles fastidieuses, comme des règles CSS répétitives pour chaque élément, ce qui devient ingérable avec un grand nombre d’items. L’article met en lumière l’écart entre les promesses futures des standards CSS et les contraintes actuelles, tout en soulignant l’importance de solutions évolutives pour des interfaces dynamiques.
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