CSS : combiner des styles

Les CSS (Cascading Style Sheets) sont un moyen très puissant pour appliquer des styles à une page HTML. Cela présente l’avantage de rassembler toutes les déclarations de styles en un seul endroit qui peut facilement être situé hors des pages HTML. Néanmoins, mes premiers efforts dans cette direction se sont rapidement traduits par la création de nombreux styles très similaires les uns aux autres.

Par exemple, j’écrivais :

  1.  

Je cherchais à améliorer et à optimiser tout cela. J’ai dû m’y reprendre à plusieurs fois avant d’arriver à une solution satisfaisante. La première étape a été presque évidente, parce qu’elle est décrite à peu près dans tous les tutoriaux et tous les livres sur CSS : on peut grouper dans une déclaration unique tous les styles identiques (comme ul et ol, dans mon exemple), menant à la présentation suivante :

  1. span class= »st0″>"Courier New"

Pas forcément extraordinaire, mais ça réduit bien le niveau de redondance.

A partir de là, je me suis retrouvé un peu dans le noir pour regrouper des styles qui ne sont pas exactement identiques mais dont on voit bien qu’ils se ressemblent. Le déclencheur a été de comprendre qu’un style peut être défini en plusieurs déclarations séparées (et complémentaires), comme ci-après :

  1. span class= »st0″>"Courier New"

En vedette :

A partir de là, la démarche était devenue claire pour des styles presque identiques : il faut grouper les parties identiques et garder le reste séparé. Dans notre exemple, cela donne alors :

  1. span class= »st0″>"Courier New"
La feuille de CSS de base de mon site est librement accessible en suivant le lien : roumazeillesv5.css

Le code final de mon example est alors devenu :

  1. span class= »st0″>"Courier New"

15 lignes au lieu de 21, presque plus aucune redondance (aucune en dehors de ce qui est resté pour la lisibilité). Cette approche a mené à des simplifications drastiques dans mes feuilles de style. J’espère que cela pourra aussi vous être utile.