Cascade, héritage et spécificité en CSS

La cascade est l'algorithme qui décide quelle déclaration CSS s'applique quand plusieurs règles donnent des valeurs différentes à la même propriété d'un même élément ; la spécificité est le « poids » d'un sélecteur dans cette décision. Ce chapitre explique les critères de la cascade dans l'ordre, le calcul de la spécificité, !important, les couches @layer et l'héritage : tout ce qu'il faut pour comprendre pourquoi une règle « ne marche pas ».

Pourquoi une règle « ne marche pas »

Tu écris ce CSS pour la page d'accueil de la médiathèque :

#contenu p {
  color: #1f2937;
}

.alerte {
  color: #b91c1c;
}

<main id="contenu">
  <p class="alerte">Fermeture exceptionnelle le 14 juillet.</p>
</main>

Le paragraphe reste gris foncé, alors que .alerte est écrite après. Dans l'inspecteur, color: #b91c1c apparaît barré. Ce n'est pas un bug : #contenu p est plus spécifique que .alerte, et la spécificité passe avant l'ordre d'écriture. Le reste du chapitre explique pourquoi, et comment écrire du CSS qui évite ces conflits.

Les étapes de la cascade

Pour chaque propriété de chaque élément, le navigateur rassemble toutes les déclarations qui s'y appliquent, puis les départage avec une suite de critères. Il passe au critère suivant seulement en cas d'égalité au précédent.

Dans la grande majorité des cas, tu n'as affaire qu'aux critères 4 et 5 : spécificité, puis ordre.

Calculer la spécificité d'un sélecteur

La spécificité est un triplet (A, B, C) :

• A : le nombre d'identifiants (#contenu) ;
• B : le nombre de classes (.alerte), d'attributs ([type="email"]) et de pseudo-classes (:hover, :nth-child()) ;
• C : le nombre de types (p, nav) et de pseudo-éléments (::before).

Le sélecteur universel * et les combinateurs (espace, >, +, ~) ne comptent pour rien.

On compare deux triplets colonne par colonne, de gauche à droite, comme on compare deux dates (année, puis mois, puis jour) : la première colonne différente décide. (1,0,1) bat (0,1,0), et (1,0,0) bat même (0,12,0) : aucun nombre de classes ne bat un seul identifiant.

Trois pseudo-classes ont une règle particulière :

L'attribut style="…" passe avant toute feuille de style : on le présente parfois comme un quatrième chiffre, devant les trois autres.

Revenons à l'exemple du début : #contenu p vaut (1,0,1), .alerte vaut (0,1,0). L'identifiant décide, le paragraphe reste gris. Les solutions, de la meilleure à la pire :

1. Ne pas utiliser d'identifiant dans le CSS : .contenu p (0,1,1) contre .contenu .alerte (0,2,0), et l'alerte gagne ;
2. augmenter la spécificité de l'alerte : #contenu .alerte (1,1,0) ;
3. !important : ça marche, et c'est le début des ennuis (section suivante).

L'ordre d'apparition

À spécificité égale, la dernière règle gagne :

.bouton { background-color: #0f766e; }
.bouton { background-color: #1d4ed8; }   /* gagne : même poids, écrite après */

L'ordre compte aussi entre les fichiers : une feuille chargée par un <link> placé plus bas dans le <head> passe après. C'est pour ça qu'on charge la feuille d'une bibliothèque (Bootstrap) avant la sienne : à spécificité égale, tes règles gagnent.

!important : l'exception à éviter

!important, placé après une valeur, fait passer la déclaration devant toutes les déclarations normales, quelle que soit leur spécificité :

p { color: #1f2937 !important; }
#contenu .alerte { color: #b91c1c; }   /* perd, malgré son id */

Le seul moyen de battre un !important est un autre !important, plus spécifique ou écrit plus bas. D'où l'engrenage : une règle ne marche pas, on ajoute !important ; une autre ne marche plus, on en ajoute un deuxième ; au bout de quelques semaines, personne ne sait plus quelle règle s'applique.

Les usages légitimes sont rares : surcharger le CSS d'un composant tiers que tu ne peux pas modifier, ou une classe utilitaire qui doit toujours gagner (.masque { display: none !important; }). Dans ton propre code, un !important est le signe d'un sélecteur mal pensé : corrige le sélecteur.

Les couches @layer

Les couches de cascade, reconnues par tous les navigateurs depuis 2022, règlent proprement le problème des priorités entre blocs de CSS. On déclare l'ordre des couches une fois, en tête de feuille ; une couche déclarée plus tard l'emporte sur les précédentes, quelle que soit la spécificité des sélecteurs :

@layer base, composants, utilitaires;

@layer base {
  #contenu a { color: #1d4ed8; }       /* (1,0,1), mais dans la couche la plus faible */
}

@layer composants {
  .bouton { color: white; }            /* gagne contre la couche base */
}

@layer utilitaires {
  .texte-centre { text-align: center; }
}

Un lien <a class="bouton"> dans #contenu est blanc : la couche composants passe avant base, malgré l'identifiant. Tu peux aussi ranger une bibliothèque entière dans une couche : @import url("bootstrap.css") layer(bibliotheque); puis déclarer @layer bibliotheque, base, composants; : tout ton CSS gagne contre elle, sans !important. Les frameworks récents, comme Tailwind CSS v4, s'appuient sur ce mécanisme.

L'héritage

Certaines propriétés se transmettent automatiquement du parent à ses descendants : c'est l'héritage. Tu déclares la police une fois sur body, et tous les paragraphes, titres et listes la reçoivent.

La logique : si border était héritée, chaque enfant d'un encadré aurait sa propre bordure.

Une valeur héritée a la plus faible des priorités : n'importe quelle règle qui vise l'élément lui-même, même * de spécificité (0,0,0), passe devant. C'est pour ça que tes liens restent bleus dans un paragraphe gris : le navigateur leur donne une couleur par défaut, qui bat la couleur héritée du paragraphe.

Quatre mots-clés, valables pour toutes les propriétés, pilotent l'héritage :

/* Les champs de formulaire n'héritent pas de la police : on la leur donne */
input,
select,
textarea,
button {
  font: inherit;
}

/* Un lien qui prend la couleur du texte qui l'entoure */
.lien-discret {
  color: inherit;
}

Déboguer la cascade avec l'inspecteur

Sélectionne l'élément dans l'inspecteur (F12, clic droit > Inspecter). Le panneau des styles affiche :

• toutes les règles qui s'appliquent, de la plus prioritaire (en haut) à la moins prioritaire ;
• les déclarations perdantes barrées ;
• les valeurs héritées, sous « Hérité de main#contenu » ;
• le fichier et la ligne de chaque règle, cliquables.

L'onglet Calculé (Computed) donne la valeur finale de chaque propriété ; un clic sur une propriété montre quelle règle l'a fixée. Dans Chrome et Edge, survole un sélecteur : une info-bulle affiche sa spécificité.

Exercices

<div id="page">
  <p class="intro important">Paragraphe 1</p>
  <p class="texte">Paragraphe 2</p>
  <p>Paragraphe 3</p>
</div>

/* A */ p { color: black; }
/* B */ .intro { color: blue; }
/* C */ #page p { color: green; }
/* D */ #page .intro { color: red; }
/* E */ .intro.important { color: orange; }
/* F */ div p.texte { color: purple; }

#ateliers .carte a.bouton { background-color: #0f766e; }
.bouton-complet { background-color: #94a3b8 !important; }
#contact .bouton-complet { background-color: #b91c1c; }

.bouton { background-color: #0f766e; color: white; }
.bouton-complet { background-color: #64748b; }
.bouton-danger { background-color: #b91c1c; }

body { font-family: Georgia, serif; color: #1f2937; }
.encadre { border: 2px solid #0f766e; color: #0f766e; }

<div class="encadre">
  <p>Entrée <strong>gratuite</strong>, voir le <a href="tarifs.html">détail des tarifs</a>.</p>
</div>