Cascade et spécificité

Ce que tu vas apprendre

• Prévoir quelle règle gagne quand plusieurs visent le même élément.
• Calculer la spécificité d'un sélecteur.
• Utiliser l'héritage à ton avantage.

Deux règles en conflit

Reprenons la page de recettes. Voici deux règles qui visent le même paragraphe :

p {
  color: black;
}

.duree {
  color: gray;
}

<p class="duree">45 minutes</p>

Le paragraphe est-il noir ou gris ? Il est gris. Le navigateur doit trancher entre des règles qui se contredisent : ce mécanisme s'appelle la cascade. Elle compare les règles selon trois critères, dans cet ordre : l'importance, la spécificité, puis l'ordre d'écriture.

La spécificité

La spécificité mesure à quel point un sélecteur est précis. Plus il est précis, plus il pèse lourd. Voici l'échelle, du plus faible au plus fort :

Un seul identifiant l'emporte sur n'importe quel nombre de classes, et une seule classe l'emporte sur n'importe quel nombre de balises. Dans notre exemple, .duree (une classe) bat p (une balise).

Quand un sélecteur en combine plusieurs, on additionne leurs poids dans chaque catégorie :

.recette p { color: black; }       /* 1 classe, 1 balise */
.recette .duree { color: gray; }   /* 2 classes */

La seconde règle gagne : elle compte deux classes contre une classe et une balise.

L'ordre d'écriture

À spécificité égale, la dernière règle écrite l'emporte :

.duree { color: gray; }
.duree { color: tomato; }

Le texte sera rouge tomate. Cela vaut aussi entre plusieurs feuilles : la feuille reliée en dernier gagne.

L'héritage

Certaines propriétés se transmettent des parents aux enfants : c'est l'héritage. Les propriétés de texte (color, font-family, font-size, line-height) sont héritées.

body {
  font-family: Georgia, serif;
  color: #333;
}

Tous les éléments de la page, du titre au lien, reprennent cette police et cette couleur, sans que tu les répètes. Une règle posée sur le parent évite des dizaines de lignes.

Les propriétés de mise en boîte, comme border ou margin, ne sont pas héritées. Imagine le résultat si chaque enfant recopiait la bordure de son parent.

Forcer ou contrôler l'héritage

Quatre mots-clés agissent sur l'héritage et sur la cascade :

a {
  color: inherit;
}

Les liens reprennent maintenant la couleur de leur parent au lieu du bleu habituel.

!important : la sortie de secours

Ajouter !important à une déclaration la place au-dessus des autres :

.duree {
  color: gray !important;
}

Écrire du CSS qui se comporte bien

Quelques habitudes évitent presque tous les conflits.

1. Style surtout avec des classes : leur poids est moyen et prévisible.
2. Évite les identifiants dans le CSS : leur poids est difficile à surpasser.
3. Garde des sélecteurs courts, deux ou trois niveaux au plus.
4. Mets les règles générales d'abord, les règles particulières ensuite.
5. Pose les réglages de texte sur body et laisse l'héritage faire le reste.

Si une règle semble ignorée, cherche d'abord une règle plus spécifique, puis une règle plus tardive, puis une propriété mal orthographiée.

À retenir

• La cascade départage les règles par importance, spécificité, puis ordre d'écriture.
• Spécificité croissante : balise, puis classe, puis identifiant.
• À spécificité égale, la dernière règle écrite gagne.
• Les propriétés de texte sont héritées, border et margin ne le sont pas.
• inherit, initial, unset et revert contrôlent l'héritage.
• Évite !important et les identifiants : préfère des classes simples.