阅读中文版本

CSS Cascade Layers

Cascade layers let authors order stylesheet rules by an explicit layer order, so specificity conflicts are resolved by layer position instead of selector weight alone.

Definition

A cascade layer is a named grouping of CSS rules declared with the @layer rule, whose position in the layer order takes precedence over plain specificity when the cascade resolves a conflict.

It is used to keep resets, frameworks, and application styles in predictable order without escalating specificity. Compared to simpler alternatives, this concept fits best when the trade-off it represents is the one the system actually cares about.

When to use it

A common use case is applying it at the boundary where the cost of getting it wrong is highest, and the scenario usually involves a concrete guarantee the system must uphold. Unlike an ad hoc approach, it makes that guarantee explicit, reviewable, and testable.

How it works

The order in which layers are first declared establishes their precedence, and a rule inside an earlier layer loses to an equally specific rule in a later layer regardless of selector complexity.

Unlayered styles sit in an implicit final layer that outranks declared layers, which lets legacy rules keep winning unless they are also placed into layers.

Trade-offs and alternatives

Author important declarations invert the normal order across layers, so a small number of important rules can reintroduce the specificity problems layers were meant to remove. The main drawback is the extra complexity it introduces, so the benefit should clearly outweigh that cost before a team adopts it.

Common misconceptions

A persistent misconception is that cascade layers change specificity scoring inside a selector. Another is that an unlayered rule always loses to a layered rule. For example, an engineer who assumes otherwise may design around a guarantee that does not actually exist, which only becomes obvious under load or failure.

Anti-patterns to avoid

Two recurring anti-patterns are to mixing layered and important declarations without a strategy and to relying on layer order while also fighting it with !important. Both tend to surface as hard-to-debug production issues rather than obvious test failures. Related concepts include CSS Container Queries, Third-Party Cookies and Storage Partitioning, Subresource Integrity (SRI).