# Calque de cascade

> Regroupement de règles CSS en couches ordonnées explicitement, permettant de contrôler quelles règles l'emportent sans manipuler la spécificité des sélecteurs.

- Auteur : Clément Hadrot
- Publié le : 2026-09-25
- Mis à jour le : 2026-09-25
- URL : https://wpmoderne.dev.wordpress-developpement.fr/lexique/calque-de-cascade/

Sur un site WordPress mêlant styles de thème, styles d'extensions et styles du cœur pour les blocs, les conflits de priorité se règlent traditionnellement à coups de sélecteurs toujours plus précis, voire de `!important` en dernier recours. La règle `@layer` propose une autre voie : décider une bonne fois pour toutes quel groupe de règles gagne, indépendamment de la spécificité de chaque sélecteur pris isolément.

## Un ordre de priorité déclaré une seule fois

On déclare l'ordre des calques en une instruction, puis chaque bloc de règles est assigné à l'un d'eux avec `@layer nom { … }`. Une règle placée dans un calque déclaré plus tard l'emporte toujours sur un calque antérieur, même si son sélecteur est objectivement moins spécifique. Les styles ne se trouvant dans aucun calque restent prioritaires sur tous les calques nommés, un point souvent source de confusion au premier abord.

## Exemple

```
@layer reinitialisation, composants, utilitaires;

@layer composants {
  .bouton { padding: 0.5em 1em; }
}
@layer utilitaires {
  .p-0 { padding: 0; }
}
```

## Bon à savoir

- Le générateur de blocs de WordPress place déjà une partie de ses styles internes dans un calque nommé `wp-block-library` depuis les versions récentes, ce qui facilite leur surcharge depuis un thème.
- La prise en charge par les navigateurs est large depuis 2022 : vérifiez tout de même la compatibilité minimale requise par votre audience avant d'en faire reposer une mise en page critique.
- Un calque déclaré sans contenu (juste pour fixer l'ordre) reste tout à fait valide et même recommandé pour planifier l'architecture des styles dès le départ.