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;
-
}
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 :
-
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.