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 :

p {
	margin:0px 10px 5px 10px;
	font-size:13px;
	font-family: Arial, Helv, Helvetica, Geneva, sans-serif;
	color: #000000
}
pre {
	margin:0px 10px 10px 10px;
	font-size:13px;
	color: #000000
}
ol {
	font-size:13px;
	font-family: Arial, Helv, Helvetica, Geneva, sans-serif;
	color: #000000;
}
ul {
	font-size:13px;
	font-family: Arial, Helv, Helvetica, Geneva, sans-serif;
	color: #000000;
}

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 :

p {
	margin:0px 10px 5px 10px;
	font-size:13px;
	font-family: Arial, Helv, Helvetica, Geneva, sans-serif;
	color: #000000
}
pre {
	margin:0px 10px 10px 10px;
	font-size:13px;
	font-family: Courier, "Courier New", monospace;
	color: #000000
}
ul, ol {
	font-size:13px;
	font-family: Arial, Helv, Helvetica, Geneva, sans-serif;
	color: #000000;
}

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 :

p {
	margin:0px 10px 5px 10px;
	font-family: Arial, Helv, Helvetica, Geneva, sans-serif;
}
p {
	font-size:13px;
	color: #000000
}
pre {
	margin:0px 10px 10px 10px;
	font-family: Courier, "Courier New", monospace;
}
pre {
	font-size:13px;
	color: #000000
}

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 :

p, pre {
	font-size:13px;
	color: #000000
}
p {
	margin:0px 10px 5px 10px;
	font-family: Arial, Helv, Helvetica, Geneva, sans-serif;
}
pre {
	margin:0px 10px 10px 10px;
	font-family: Courier, "Courier New", monospace;
}

Le code final de mon example est alors devenu :

p, pre, ul, ol {
	font-size:13px;
	color: #000000
}
p {
	margin:0px 10px 5px 10px;
	font-family: Arial, Helv, Helvetica, Geneva, sans-serif;
}
ul, ol {
	font-family: Arial, Helv, Helvetica, Geneva, sans-serif;
}
pre {
	margin:0px 10px 10px 10px;
	font-family: Courier, "Courier New", monospace;
}

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.