CSS cascade layers: set precedence before selectors grow

Last updated: 5 Oct 20265 min read

tutorial

A cascade layer groups rules at a defined precedence level. For ordinary author declarations, later declared layers win over earlier layers before selector specificity is compared.

How the rule works

A case-review interface loads a base skin and route-specific components. A component rule should beat a base rule without requiring an ID selector or repeated important flags. Declare layer order at the top, then assign each rule to the layer that owns it. Unlayered normal rules beat normal layered rules, so keep accidental unlayered overrides out of the file. Important declarations reverse layer order; use them only for a reviewed exception. When a declaration seems ignored, inspect its origin, importance, layer, and specificity in that order instead of adding another selector segment.

@layer base, components;
@layer base {
  .case-status { color: #31445a; }
}
@layer components {
  .case-status { color: #175b44; }
}

Cost and verification

The computed color is #175b44 for a matching element. Layers do not add a network request or measurable layout work by themselves; their cost is organizational. A layer order changed by an early import can alter many components at once, so keep that order deliberate and test representative routes. The rule remains a color declaration, not a promise that the color has enough contrast against every background. Check theme variants and the computed style in the browser.

Common Mistakes

Do not expect a more specific selector in an earlier normal layer to win.
Do not leave emergency unlayered rules hidden below organized layers.
Do not assume important declarations follow the same layer order as normal ones.

Connected lessons

Related behavior

CSS all and revert-layer: reset with a named boundary

css

foundations

web