CSS cascade layers and how to use them

The cascade, given explicit priorities

The CSS cascade decides which declaration wins when several target the same property. Before layers, that decision rested largely on specificity, the selector weight that the specificity article explains, plus source order. Specificity is why a one-off #nav a { color: red } beats a broad a { color: blue } whether you wanted it to or not.

CSS cascade layers add an explicit author ordering layer on top of that. A @layer block gives a whole group of rules a shared priority, so you can say "reset always loses to theme, theme always loses to components", and the cascade respects the layer order before it cares about specificity within the winning layer.

A layer is a named order

@layer reset, theme, components;

@layer theme {
  a { color: #1a4f8b; }
}

@layer reset {
  a { color: #000; }
}

The first line declares the order: reset comes before theme, which comes before components. Rules in later layers win over earlier layers regardless of specificity, so the theme anchor colour beats the reset anchor colour even though the reset rule is "more specific" or written later by source order. Within a layer, normal cascade rules, including specificity and source order, still apply.

Later layers win

The single most useful mental model: the cascade now considers layers before it considers specificity. A rule in components beats a rule in theme, even when the theme rule carries a higher specificity. What strongly ends up mattering is the order you declared in the @layer statement, because that fixes the winner before selector weight gets involved.

This collapses the classic arms race. Instead of reaching for a more specific selector or an !important to wrest control from a framework, you move the rule to a later layer. Keep these ordering notes in mind:

• Declared layer order comes from the first @layer statement, so state it once at the top.
• Unlayered author styles come last, after all layers, so they act as an emergency override level by default.
• Within the same layer, specificity and source order decide as normal.

Adopting layers on a real site

Adoption does not have to mean rewriting everything at once.

1. Name the layers you actually have. On most sites these are reset, base, utilities, components, and occasionally overrides. Declare the order once.
2. Fold in files progressively. You can name a layer inside each stylesheet with @layer components { ... }, and the browser merges same-name layers, so you add the name around a block and keep moving.
3. Move rules later, not just higher specificity. When a fix currently relies on !important, the better home is a later layer, because custom properties and a clear layer order make the intent obvious.
4. Test with the cascade debugging. The browser's "styles" panel now shows which layer a rule belongs to, so a layered fix is verifiable rather than guessed.

Layers keep the sitewide style predictable by giving the cascade a legible priority, the same spirit as the container-based and performance tricks in content-visibility: a smaller surface to reason about. Combined with discipline about specificity inside each layer, a normal site can retire most of its override wars.