@layer Declaration and Ordering

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.

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.

Declare layers upfront in a single statement. The order of declaration determines priority — later layers win over earlier ones.

The @layer declaration should be at the top of your stylesheet (or main import file). You can add styles to layers in any order after the declaration — the priority is determined by the declaration order, not where styles are added.

Because layer priority is determined at declaration time, you can add styles to a layer anywhere — even before it has been declared, by forward-referencing. The declared order is what matters.

A declaration in a later layer always wins over a declaration in an earlier layer, regardless of specificity:

Styles placed outside any layer are called unlayered. They have the highest priority — even higher than the last declared layer. Use this for emergency overrides that should always win.

Complete priority order (highest to lowest for author styles):

1. Unlayered styles (outside any @layer)
2. Last declared layer (e.g., utilities)
3. Second-to-last (e.g., components)
4. Earlier layers (base, reset)

!important in layers is tricky: it reverses layer order for that declaration. !important in the earliest layer wins over !important in later layers. This matches the original cascade behavior for user vs author styles.

Layers can be nested using dot notation:

A realistic project layer setup:

@layer establishes explicitly ordered cascade layers. Declare layer names in priority order (lowest first). Later layers always win over earlier ones, independent of specificity. Unlayered styles have the highest priority. !important reverses layer priority order for that declaration.