Cascade Layers

Definition

Mécanisme @layer qui organise les styles en couches ordonnées dans la cascade. La dernière couche déclarée a priorité, indépendamment de la spécificité des sélecteurs.

Analogie

Comme des calques dans Photoshop : chaque couche a une priorité claire, le calque du dessus gagne.

Exemple de code

@layer reset, base, components, utilities;

@layer reset { * { margin: 0; } }
@layer base { a { color: blue; } }
@layer components { .btn { color: white; } }
@layer utilities { .text-red { color: red; } }

Cas d'usage

Gérer la priorité CSS dans un design system complexe sans guerres de spécificité.

Anti-pattern

Termes lies