La cascade : origine et ordre

La cascade est l’algorithme utilisé par CSS pour déterminer quelle déclaration de style l’emporte lorsque plusieurs règles ciblent la même propriété sur le même élément. Elle prend en compte l’origine, l’importance, la spécificité et l’ordre source.

Les déclarations CSS proviennent de trois origines, par ordre de priorité :

1. Feuille de style de l’agent utilisateur — valeurs par défaut du navigateur
2. Feuille de style de l’utilisateur — styles personnalisés définis par les utilisateurs (accessibilité)
3. Feuille de style de l’auteur — vos fichiers CSS

Avec les déclarations normales (sans !important), les styles de l’auteur remplacent les styles de l’utilisateur, qui remplacent eux-mêmes les styles de l’agent utilisateur. C’est pourquoi votre CSS l’emporte sur les valeurs par défaut du navigateur.

Ajouter !important inverse l’ordre des origines pour cette déclaration :

1. !important de l’agent utilisateur
2. !important de l’utilisateur — priorité la plus élevée (accessibilité)
3. !important de l’auteur

C’est pourquoi les surcharges d’accessibilité de l’utilisateur (par exemple, les couleurs forcées) ne peuvent pas être neutralisées par le CSS de l’auteur.

Lorsque deux déclarations de la même origine sont en concurrence, la spécificité détermine celle qui l’emporte. La spécificité la plus élevée l’emporte — c’est ce à quoi les développeurs pensent en premier lorsqu’ils déboguent du CSS.

Lorsque deux règles ont une spécificité identique, celle qui apparaît plus tard dans la feuille de style l’emporte. C’est la règle de l’« ordre source ». C’est pourquoi l’ordre de vos déclarations @import et @keyframe est important.

Les couches de cascade CSS (@layer) introduisent une nouvelle étape de la cascade entre l’origine et la spécificité. L’ordre des couches détermine la priorité, et une déclaration placée dans une couche ultérieure l’emporte sur une déclaration d’une couche antérieure, quelle que soit leur spécificité.

Ordre complet des priorités (de la plus élevée à la plus faible) :

1. Origine + importance (!important utilisateur, !important auteur)
2. Valeurs d’animation
3. Couches CSS (les couches ultérieures l’emportent)
4. Spécificité
5. Ordre source
6. Valeurs de transition

L’héritage est différent de la cascade. Les valeurs héritées proviennent du style calculé de l’élément parent. Elles sont remplacées par toute valeur appliquée directement, même par une règle à faible spécificité.

Placez les styles plus spécifiques (variantes) après les styles de base dans votre feuille de style. C’est pourquoi les fichiers de composants doivent être importés après les fichiers de réinitialisation et de base.

Dans le panneau des styles des DevTools, les règles sont répertoriées de la priorité la plus élevée à la plus faible. Les règles barrées ont perdu dans la cascade. Survolez une règle pour voir son fichier source et son numéro de ligne afin de la déboguer.

La cascade résout les conflits de style en utilisant l’origine (auteur > utilisateur > navigateur), puis l’importance (!important inverse l’ordre), puis l’ordre de @layer, ensuite la spécificité et enfin l’ordre source. Comprendre la cascade vous permet de prédire exactement quelle règle l’emporte dans n’importe quel conflit — fini les suppositions.