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.

plutôt que

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 14)

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.[Pour en savoir plus : [CSS Cheat Sheet (pdf – 379k) de Dave Child ou sa traduction française par goetzilla: Aide-mémoire CSS (pdf – 43k) ]]

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

plutôt que

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