@layer Declaration and Ordering
Declare named cascade layers and control their priority order with @layer statements.
What is @layer?
CSS cascade layers (@layer) provide a mechanism to explicitly control the priority of CSS rules in the cascade — independent of specificity. Lower-priority layers lose even when they have higher specificity selectors.
Why @layer Matters
Without layers, every CSS rule competes using specificity and source order. This leads to specificity wars when reset, component, and utility styles all fight for priority. Layers give each group a fixed, predictable priority.
All lessons in this course
- @layer Declaration and Ordering
- Adding Styles to Layers
- Layer Priority and !important Interaction
- Layers in Third-Party Code