Applications et sites
E-commerce & SaaS
Intelligence artificielle
Expertises techniques
Bonne pratique
Écrire des sélecteurs CSS efficaces
Ce que dit le référentiel
Privilégier les sélecteurs basés sur des ID ou des classes. Ils seront ainsi filtrés plus rapidement, économisant des cycles CPU à la machine interprétant les règles.
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
Utiliser Tailwind CSS permet d’écrire des sélecteurs efficients en se basant sur des classes utilitaires directement dans les composants React. Cela réduit la complexité des sélecteurs et optimise les performances, car les classes utilitaires sont précises et uniformes.
D'autre part, le CSS-in-JS dans des frameworks comme styled-components ou Emotion assure un style encapsulé au niveau des composants, minimisant les sélecteurs complexes. Cela favorise une meilleure efficacité des cycles CPU tout en maintenant le code lisible et maintenable.
Règle de validation
Le nombre de sélecteurs CSS qui n'utilisent ni d'id, ni de class et ni d'attribut doit être inférieur ou égal à 0
Ressources économisées