Accueil > Développement > Intégration > Optimiser le poids de sa feuille de style

Optimiser le poids de sa feuille de style

vendredi 21 octobre 2005, par Nissone

La feuille de style externe

Plutôt que de mettre tout votre style en interne, dans une page, il faut privilégier la feuille de style externe.

<link rel="stylesheet" type="text/css" href="votre_feuille_de_style.css" />

plutôt que

<style>
* {font-family: Arial, Helvetica, sans-serif; font-size: medium; color: #ABC}
body {background: url(images/fond.jpg)}
h1 {border: solid #DEF; border-width: 0 2px 2px 0; background: #FFFFF0}
#footer, #footer a, #footer span {font-size: smaller}
#footer {color: #BDB76B}
#footer a {color: #562}
#footer span {margin: 0 5px}
</style>

Le séparteur

A la fin d’une déclaration, on met un " ;".
Le point-virgule est un séparateur, entre deux déclarations, il n’est donc pas nécessaire de le mettre à la fin de la dernière déclaration.
Le gain peut parraître minime, mais sur Internet, chaque octet compte.

h2 {margin-top:20px}
h3 {text-indent:10%}
p {text-align: justify}

plutôt que

h2 {margin-top:20px;}
h3 {text-indent:10%;}
p {text-align: justify;}

Les couleurs

La notation hexadécimale des couleurs peut être passée sur 4 caractères au lieu de 7 lorque chacune des trois couleurs est décrite par deux caractères identiques.

color:#ABC

plutôt que

color:#AABBCC

Les unités

Lorsqu’une valeur est à 0, il est inutile de préciser son unité, quelle qu’elle soit.

margin:0 5em

plutôt que

margin:0px 5em

Les valeurs par défaut

Chaque propriété à une valeur par défaut initiale. Inutile, donc, de déclarer le comportement d’un élément si celui-ci est déjà par défaut.

div {border:1px solid #A1F5C3}

plutôt que

div {position:static; border:1px solid #A1F5C3}

Les propriétés raccourcies

(Voir Les propriétés raccourcies)

Une même propriété peut, à elle seule, déclarer plusieurs propriétés. Elles sont donc à privilégier fortement ; en plus du gain de poids, elles sont aussi bien plus agréable au développement et à la relecture car elles permettent un code moins verbeux. [1]

border: solid #DEF; border-width: 0 2px 2px 0;

plutôt que

border-color: #DDEEFF; border-style: solid; border-left-width: 0px; border-right-width: 2px; border-top-width: 0px; border-bottom-width: 2px;

Les déclarations communes

Lorsque qu’une ou plusieurs déclarations s’appliquent à plusieurs éléments, les declarations communes apportent, elles aussi, plusieurs avantages.
Celui du gain de poids, un code moins verbeux, mais aussi une maintenance plus agréable puisqu’une même propriété pourra être modifier sur plusieurs éléments, même différents mais tous concernés, d’un coup. [1]

#footer, #footer a, #footer span {font-size: smaller}

plutôt que

#footer {font-size: smaller}
#footer a {font-size: smaller}
#footer span {font-size: smaller}

Les propriétés qui héritent

Les CSS sont basées sur le système d’héritage et un certain nombres de propriétés héritant, il n’est pas nécessaire de les re-déclarer dans les éléments enfants. [1]

* {font-family: Arial, Helvetica, sans-serif}

plutôt que

* {font-family: Arial, Helvetica, sans-serif}
p {font-family: Arial, Helvetica, sans-serif}
a {font-family: Arial, Helvetica, sans-serif}

Les selecteurs qui appartiennent déjà à une classe

Pour un même groupe, il est parfois inutile de créer une classe pour chaque élément du groupe. Il suffit de faire appel à la classe (ou à l’id) du groupe et de préciser quel élément sera touché par la règle.
Si le poids de la feuille de style y gagne, le poids du code HTML en tire également le même bénéfice.

#footer {color: #BDB76B}
#footer a {color: #562}
#footer span {margin: 0 5px}

et
<div id="footer"><span>Réalisation&nbsp;:</span><a href="ma_page.htm" title="Le site du webmaster">Ma page</a></div>

plutôt que

#footer {color: #BDB76B}
.footerLiens {color: #562}
.footerTexte {margin: 0 5px}

et
<div id="footer"><span class="footerTexte">Réalisation&nbsp;:</span><a class="footerLiens" href="ma_page.htm" title="Le site du webmaster">Ma page</a></div>


[1Pour en savoir plus : CSS Cheat Sheet (pdf - 379k) de Dave Child ou sa traduction française par goetzilla : Aide-mémoire CSS (pdf - 43k)