Cascade en CSS : l'ordre secret qui décide quelle règle gagne

Quand deux règles CSS ciblent le même élément avec des valeurs différentes pour la même propriété, quelqu'un doit trancher. Ce quelqu'un, c'est la cascade : l'ensemble des règles qui déterminent quelle déclaration l'emporte finalement à l'écran.

Comprendre la cascade dans son ensemble évite de traiter chaque conflit de style comme un mystère isolé, alors qu'il suit en réalité un ordre de résolution parfaitement défini, étape par étape.

Définition

La cascade est l'algorithme que le navigateur applique pour choisir, parmi toutes les déclarations CSS qui ciblent un même élément et une même propriété, celle qui sera réellement appliquée. Elle s'appuie sur plusieurs critères examinés dans un ordre précis.

Les critères, dans l'ordre

Le navigateur examine successivement l'origine et l'importance de la règle, le calque de cascade auquel elle appartient, sa Spécificité, puis en dernier recours son ordre d'apparition dans le code.

/* règle 1, plus tôt dans le fichier */
p {
  color: navy;
}

/* règle 2, plus tard dans le même fichier, même spécificité que la règle 1 */
p {
  color: crimson;
}

/* résultat : crimson l'emporte, car cette règle arrive après, à spécificité égale */

L'origine distingue les styles par défaut du navigateur, les styles écrits par l'auteur du site, et les préférences imposées par l'utilisateur. Sauf cas particulier, les styles de l'auteur l'emportent sur ceux du navigateur. La déclaration !important inverse ce rapport de force en donnant une priorité presque absolue à la règle qui la porte, ce qui en fait un outil à manier avec parcimonie.

Les calques de cascade

Les Calque de cascade permettent de regrouper des règles dans des blocs nommés dont la priorité relative est définie explicitement, indépendamment de l'ordre dans lequel les blocs apparaissent dans le fichier. Un style placé dans un calque déclaré prioritaire l'emporte sur un style placé dans un calque déclaré moins prioritaire, même si ce dernier a une spécificité plus élevée ou apparaît plus loin dans le code.

Pourquoi comprendre la cascade évite les mauvaises habitudes

Sans cette vue d'ensemble, un style qui refuse de s'appliquer pousse souvent à ajouter !important par réflexe, ce qui règle le symptôme sans jamais traiter la cause. En identifiant à quelle étape de la cascade le conflit se joue réellement, la correction devient précise : ajuster la spécificité, revoir l'ordre des règles, ou reconsidérer l'organisation des calques.

Un cas complet, étape par étape

Imaginez deux règles concurrentes : l'une provient d'une bibliothèque de composants tierce, l'autre est écrite par l'équipe du projet. Si les deux ont la même spécificité, celle chargée en dernier l'emporte, ce qui explique pourquoi l'ordre d'import des feuilles de style dans le projet a une réelle importance et mérite d'être documenté plutôt que laissé au hasard. Placer systématiquement ses propres styles après ceux d'une bibliothèque tierce évite ce genre d'ambiguïté dès le départ. Notre formation HTML et CSS revient sur ce genre de conflit avec des exemples concrets, pour apprendre à diagnostiquer une règle qui ne s'applique pas au premier coup d'œil.

Questions fréquentes

Non, ce sont deux mécanismes distincts. La cascade départage des règles concurrentes, tandis que l'héritage transmet la valeur d'une propriété d'un élément parent vers ses enfants quand aucune règle ne la définit directement sur eux.

C'est l'ordre d'apparition dans le code qui départage alors les deux règles : celle déclarée en dernier l'emporte, ce qui explique pourquoi l'ordre des fichiers CSS chargés peut parfois changer un rendu.

Oui, et ils se placent très haut dans l'ordre de priorité, juste en dessous de !important, ce qui les rend difficiles à surcharger depuis une feuille de style externe classique.