L’éco-conception web est l’idée de minimiser les ressources consommées par une page web chaque fois qu’elle est visitée. Bien que, sur la plupart des formules de calcul d’éco-ratings, le CSS soit rarement pris en compte, son importance ne devrait pas être négligée.
Le CSS est un sujet assez complexe. La flexibilité des sélecteurs donne un pouvoir extraordinaire au développeur, mais elle demande une grande organisation et discipline pour tout garder propre et efficace. En particulier, les sélecteurs trop basés sur la structure du DOM, la redondance, et le manque de spécificité peuvent surcharger le système sans pour autant apporter quoi que ce soit.
En général, il vaut mieux de toujours utiliser des sélecteurs basés sur des classes et en moindre mesure des identifiants. Les classes sont réutilisables, et comme on peut mettre plusieurs classes sur un même élément, elles sont modulaires. Un style avec un sélecteur de classe peut donc regrouper une série de points de design qui peuvent être ensuite appliqués à toute une série d’éléments sans en dupliquer le code. D’autre part, si certains éléments vont toujours être uniques – comme par exemple, l’entête ou le pied de la page – il peut être utile d’utiliser des identifiants, car, étant uniques, il y a moins de risques de débordement stylistique – c’est à dire, d’appliquer des styles à d’autres éléments non voulus par erreur.
Une conséquence de l’utilisation des classes se retrouve dans les changements à la mise en page via Javascript. Au lieu d’avoir à changer chaque propriété une par une, il suffit d’ajouter ou enlever une classe à l’élément en question, ce qui est non seulement plus pratique pour le développeur, mais aussi pour le navigateur, qui n’a besoin de générer qu’un seul réaffichage pour tous les changements.
En allant plus sur le détail, une propriété CSS relativement peu connue et peu utilisée est assez intéressante en ce qui concerne l’économie de ressources: « contain ». Cette propriété permet de définir la dépendance entre blocs, d’un point de vue de la mise en page, ce qui aide le navigateur à mieux utiliser ses ressources lors de l’affichage des éléments pendant les interactions avec la page.
Pour terminer, il est conseillé d’externaliser, minimiser et regrouper tout le CSS utilisé. En effet, le CSS externalisé – c’est à dire, placé sur un fichier externe à la page, au lieu d’en former partie directe – peut être mis en cache par le navigateur au lieu d’avoir à le télécharger chaque fois. Regrouper tout le CSS sur un seul fichier permet de limiter le nombre de requêtes, et le minimiser en réduit la taille. De plus, ces deux dernières taches sont facilement déléguées à un plugin comme Asset Clean Up pour ne pas avoir à s’en occuper manuellement.
