Les feuilles de styles sont bien pratiques car elles permettent de déclarer des styles globaux ou propres à chacun des éléments d’une page HTML.
Malheureusement, il n’est pas toujours facile de savoir quelle déclaration l’emportera au final.

Je vais donc tenter de résumer, simplement, le principe qui permet au navigateur de savoir quelle déclaration appliquer pour un élément grâce au « poids » de son sélecteur.

Crédit photo : M4r00n3d

Une histoire de poids :

• Balise HTML : 1 point, par exemple : div{…}
• Classe : 10 points, par exemple : .article{…}
• Id : 100 points, par exemple : #header{…}
• Déclaration « inline » (dans le code HTML) : 1000 points, par exemple : <div style= »… »></div>

A noter, qu’à « poids » égal, c’est la dernière déclaration qui l’emporte.

Exemples :

• #test { background-color:red } -> 100 points
• div.toto {float:left} -> 10+1 = 11 points
• body #header div -> 1+100+1 = 102 points

etc…

Concrètement :

Si vous déclarez :

form.inscription input{ width:100px }
input.email { width:130px }

A l’affichage, le champ « Email » s’affichera avec une largeur de 100px.
Car la première déclaration a un poids de 12 points alors que la seconde (qui peut paraitre plus précise) n’a qu’un poids de 11 points. 12>11 (sisi, promis), donc la première déclaration l’emporte.

L’attribut !important :

L’attribut !important donne une priorité absolue, un « poids »infini à la déclaration qui le précède. Du coup, les déclarations portant la mention !important prendront toujours le dessus sur les autres déclarations, aussi précises soient-elles, il l’emporte même sur les déclarations dites « inline ». (Ce qui peut devenir gênant si vous avez besoin de préciser le style d’un élément directement dans son code HTML)

Ainsi :

• body div.test { background-color: blue } -> 1+1+10 = 12 points
• body div.test { background-color: blue !important } -> 1+1+10+infini = infini

Le cas Internet Explorer :

On ne peut parler de feuilles de style sans parler de la lignée Internet Explorer.

• IE6 ne prendra pas en compte l’attribut !important. Ainsi, il appliquera bêtement la dernière déclaration trouvée pour un élément.
• IE7 prendra en compte les poids, sauf si vous êtes en quirk-mode ou que le doctype n’a pas été déclaré (auxquels cas, il se comportera comme IE6)
• IE8 semble respecter correctement les priorités des déclarations
• IE9 devrait se comporter de manière identique à IE8 (normalement ^^)

Vous l’aurez compris, cette analogie entre le type de sélecteur et « poids » est une excellente méthode pour organiser ou debugger vos feuilles de styles.

Peu être avez-vous d’autres astuces concernant les feuilles de styles et leurs déclarations. N’hésitez pas à profiter des commentaires pour partager à votre tour ces astuces.

Cet article est laaaargement inspiré des articles de Tutplus , Smashing Magazine et Electric Toolbox