Le principe même des CSS, le C de Cascading, est très ingénieux. Seul souci : comment ne pas se perdre dans l’application en cascade de ses styles et ne pas se retrouver à chercher pendant 3 heures pourquoi ce putain de lien est en gras alors qu’il ne devrait pas.

Heureusement le W3C est là et propose une méthode infaillible pour déterminer la spécificité d’un style donné :

  1. count the number of ID attributes in the selector (= a)
  2. count the number of other attributes and pseudo-classes in the selector (= b)
  3. count the number of element names in the selector (= c)
  4. ignore pseudo-elements.

Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity.

Example(s):

*             {}  /* a=0 b=0 c=0 -> specificity =   0 */
LI            {}  /* a=0 b=0 c=1 -> specificity =   1 */
UL LI         {}  /* a=0 b=0 c=2 -> specificity =   2 */
UL OL+LI      {}  /* a=0 b=0 c=3 -> specificity =   3 */
H1 + *[REL=up]{}  /* a=0 b=1 c=1 -> specificity =  11 */
UL OL LI.red  {}  /* a=0 b=1 c=3 -> specificity =  13 */
LI.red.level  {}  /* a=0 b=2 c=1 -> specificity =  21 */
#x34y         {}  /* a=1 b=0 c=0 -> specificity = 100 */

Autres astuces :

  • évitez les styles inline p style="background:red; margin:30px"
  • évitez l’utilisation de la syntaxe !important
  • utilisez le moins de sélecteurs possibles : mieux vaut un p.intro tout court qu’un body #chapeau p.intro

Plus d’infos sur CSS et specificité dans mon del.icio.us, au tag specificity