Cascade, spécificité et héritage

Apprenez à prédire quelle règle CSS l'emporte grâce à la spécificité, et à exploiter l'héritage pour écrire moins de code.

8 min · 3 questions

Vous écrivez une règle, vous rechargez la page… et rien ne change. Dans la majorité des cas, le coupable n'est pas un bug : c'est la cascade. Quand plusieurs règles ciblent le même élément, le navigateur les départage dans cet ordre : l'origine de la règle (styles du navigateur, puis les vôtres), la spécificité du sélecteur, et enfin l'ordre d'apparition dans le code. Maîtriser ce mécanisme vous évitera des heures de débogage.

p {
  color: gray;
}

.article p {
  color: navy;
}

La spécificité se calcule comme un score à trois chiffres : (identifiants, classes, éléments). #menu vaut 1-0-0, .nav-link vaut 0-1-0, a vaut 0-0-1. On compare de gauche à droite : #menu (1-0-0) bat .nav .link .active (0-3-0), même avec trois classes. Exercice mental : qui gagne entre header nav a (0-0-3) et .main-link (0-1-0) ? La classe, car une classe pèse plus lourd que n'importe quel nombre d'éléments.

header nav a {
  color: steelblue;
}

.main-link {
  color: crimson;
}

L'héritage est votre allié pour écrire moins de code : les propriétés liées au texte (color, font-family, font-size, line-height) se transmettent automatiquement aux descendants. Les propriétés de boîte (margin, padding, border, width) ne s'héritent pas - heureusement, sinon chaque enfant recevrait la bordure de son parent. Définissez donc votre typographie une seule fois, au plus haut niveau.

body {
  font-family: "Inter", sans-serif;
  color: #1f2937;
  line-height: 1.6;
}

Quiz de validation

Vérifiez que vous avez bien retenu les points clés de cette leçon.

1. Deux règles ciblent le même paragraphe : #intro { color: red; } puis .text { color: blue; }. Quelle couleur s'applique ?
   • Bleu, car la classe est déclarée en dernier
   • Rouge, car un identifiant est plus spécifique qu'une classe
   • Aucune, le navigateur signale un conflit
2. Laquelle de ces propriétés est héritée par défaut par les éléments descendants ?
   • margin
   • color
   • border
   • padding
3. Deux sélecteurs ont exactement la même spécificité et ciblent le même élément. Quelle règle gagne ?
   • La règle écrite en dernier dans la feuille de style
   • La règle écrite en premier
   • La règle dont le sélecteur est le plus court