= CSS cascade layer
{c}
A <CSS cascade layer> groups style declarations into an explicit ordering within the <CSS cascade>. Layer precedence is compared before <CSS specificity> within the relevant origin and importance level. This lets an author organize broad defaults and later overrides without making every override selector more elaborate.<CSS Cascading and Inheritance Level 5 by World Wide Web Consortium>[Cascade Layers, layer ordering and relation to the cascade]{ref}
For example, declare `@layer base, theme;`. Put `#notice { color: red; }` in base and `p { color: blue; }` in theme. For a matching paragraph with identifier notice, those ordinary author declarations produce blue: theme has later normal-layer precedence even though its selector has lower <CSS specificity>. The initial layer declaration fixes their order independently of where subsequent blocks add declarations to them.
Important declarations reverse that ordering. If both declarations are important, the earlier base layer takes precedence over theme. Ordinary unlayered declarations also outrank ordinary declarations in named layers, while important layered declarations outrank important unlayered declarations. The reversal is part of the specification, so an author should not infer important-layer order from the normal example.<CSS Cascading and Inheritance Level 5 by World Wide Web Consortium>[Layer Ordering and the reversed order for important declarations]{ref}
Layers do not change which elements a <CSS selector> matches or make invalid values usable. They change the comparison among applicable declarations. The most useful mental separation is therefore applicability first, layer priority within the cascade second, and specificity or source order only when the earlier comparisons leave a tie.
Back to article page
