Priorité des couches et interaction avec !important

Pour les déclarations normales (sans !important), la priorité de la cascade est la suivante :

1. Styles hors couche (priorité la plus élevée)
2. Dernière couche déclarée
3. Couches déclarées précédemment (priorité la plus faible)

Pour les déclarations !important, l’ordre de priorité est inversé :

1. !important dans les styles hors couche (priorité la plus faible du niveau !important)
2. !important dans la première couche déclarée (priorité la plus élevée)
3. !important dans les couches suivantes (priorité moindre)

L’inversion reflète le fonctionnement des déclarations !important de l’utilisateur et de l’auteur dans la cascade d’origine. La déclaration !important de l’utilisateur prend le dessus sur celle de l’auteur afin de protéger les préférences d’accessibilité — la même logique s’applique aux couches. Avec !important, les couches déclarées précédemment (les plus fondamentales) l’emportent.

Démonstration de la priorité normale par rapport à la priorité importante :

Utilisations acceptables dans les couches :

• Couche de réinitialisation/normalisation : !important pour empêcher tout composant de remplacer des réinitialisations essentielles
• Utilitaires d’accessibilité : display: none !important pour les utilitaires de masquage
• Réinitialisation pour la réduction des animations : animation: none !important

N’utilisez jamais !important dans les couches de composants. Cela va à l’encontre de l’objectif des couches et crée des problèmes de priorité difficiles à déboguer. Utilisez plutôt l’ordre des couches pour vous assurer que les utilitaires l’emportent.

!important hors couche possède la priorité la plus faible du niveau !important. Cela signifie que le !important d’une couche de réinitialisation remplace un !important hors couche — un résultat contre-intuitif.

Dans l’origine de l’auteur, les couches trient les déclarations. Cependant, les déclarations !important de l’agent utilisateur et de l’utilisateur restent prioritaires sur toutes les déclarations de l’origine de l’auteur (avec ou sans !important). L’ordre complet de la cascade reste le suivant :

1. !important de l’agent utilisateur
2. !important de l’utilisateur
3. !important de l’auteur (dans l’ordre des couches : la première couche l’emporte)
4. Déclaration normale de l’auteur (dans l’ordre des couches : la dernière couche l’emporte)
5. Déclaration normale de l’utilisateur
6. Déclaration normale de l’agent utilisateur

Pour vérifier la priorité des couches dans votre projet, écrivez volontairement des règles contradictoires dans différentes couches et vérifiez laquelle l’emporte dans DevTools. Le panneau Styles indique de quelle couche provient la règle retenue.

Après avoir adopté @layer, la spécificité devient moins déterminante pour la plupart des CSS de composants. Vous pouvez écrire des sélecteurs plus simples et moins spécifiques, puis vous appuyer sur l’ordre des couches pour gérer la priorité — ce qui réduit considérablement les conflits de spécificité.

Les couches sont déclarées ainsi : @layer reset, components, utilities. Une déclaration !important se trouve dans la couche reset et une autre dans utilities. Laquelle l’emporte ?

Pour les déclarations normales, la couche suivante l’emporte. Pour !important, la première couche l’emporte. Un !important hors couche possède la priorité la plus faible du niveau !important. Utilisez !important uniquement dans les couches de réinitialisation et d’accessibilité. Avec les couches, vous pouvez écrire des sélecteurs plus simples et laisser l’ordre des couches gérer la priorité plutôt que la spécificité.