CSS Cascade Layers: Browser Support, Syntax, Use Cases

What is CSS Cascade Layers?

CSS Cascade Layers are explicit specificity buckets defined by the W3C in CSS Cascading and Inheritance Level 5. The @layer at-rule declares a layer and sets its order in the cascade, so the last declared layer wins over earlier ones, regardless of selector specificity.

Which browsers does CSS Cascade Layers support?

Cascade layers ship by default in every modern engine. The Web Platform Baseline marks @layer as Widely Available across Chromium, Gecko, and WebKit, with Internet Explorer the only major engine that never added the feature.

How do you use the @layer at-rule?

Declare layer order once at the top of your stylesheet, then add rules into each named layer. Browsers stack the layers in the order you listed them, so the last one wins for normal declarations.

• Declare layer order: Put a single @layer statement at the top of your stylesheet listing every layer name in priority order, lowest to highest. Example: @layer reset, base, components, utilities;.
• Add rules into a named layer: Wrap each block of rules in @layer name { ... }. Reopening the same name later appends rules to the existing layer instead of creating a new one.
• Import third-party CSS into a layer: Use @import url(framework.css) layer(framework); to drop a vendor stylesheet into your own layer order so its rules cannot outrank your overrides.
• Nest layers when you need sub-buckets: Write @layer framework.components or nest @layer blocks. Nested layers form a parent.child path that orders only inside the parent, so other parents stay untouched.
• Detect support before shipping: Wrap a fallback in @supports not (at-rule(@layer)) { ... } so Safari 15.3 and earlier still get a usable stylesheet without duplicating every rule.

Verify the order is doing the work in DevTools by inspecting the Computed pane and checking the Specificity column for the @layer label next to the winning rule.

/* 1. Declare layer order up front. The first layer has the lowest priority. */
@layer reset, base, components, utilities;

/* 2. Add rules into each layer. */
@layer reset {
    * { margin: 0; padding: 0; box-sizing: border-box; }
}

@layer components {
    .button { padding: 12px 20px; border-radius: 8px; background: #2b6cb0; color: #fff; }
}

@layer utilities {
    /* Wins over .button even though the selector is less specific. */
    .text-center { text-align: center; }
}

/* 3. Detect support before falling back. */
@supports not (at-rule(@layer)) {
    /* Older Safari and Firefox land here. */
    .button { padding: 12px 20px; border-radius: 8px; background: #2b6cb0; color: #fff; }
}

What are the use cases of CSS cascade layers?

Cascade layers solve specificity problems that used to require !important, deep selectors, or build-time tricks. Most teams adopt them on design systems, vendor stylesheets, and theming code where override order has to be predictable.

• Design systems: Put tokens, base, components, and utilities in named layers so a one-class utility always beats a complex component selector without bumping specificity.
• Third-party vendor CSS: Import Bootstrap or a UI kit into a low-priority layer with @import url(...) layer(vendor); so your own rules win without copying every selector.
• Tailwind CSS v4: Tailwind ships native @layer theme, base, components, and utilities. User overrides land in the right slot automatically, replacing the v3 build-time directive.
• Theming and dark mode: Group every theme variation in a theme layer that loads after the base layer. Switching themes becomes a layer swap instead of a specificity escalation war.
• Legacy CSS migration: Drop a legacy stylesheet into a low-priority layer while you rewrite the new system in a higher layer. Old rules keep working until each one is replaced.

What are the known issues with CSS cascade layers?

Cascade layers ship widely but still surprise teams that move from a flat stylesheet to a layered one. Most of the bugs come from interactions with !important, unlayered styles, and older Safari builds that drop every rule inside an unknown @layer block.

• Unlayered styles always win: Any rule outside a @layer beats every rule inside a layer. A stray global selector in your reset will silently override a utilities layer until you move it into a layer too.
• !important reverses the order: Important declarations make the first layer win, not the last. Teams who use !important inside utilities expecting it to dominate end up with reset rules winning instead.
• Safari 15.3 drops layered rules entirely: Older Safari does not parse @layer, so every rule inside the block is discarded. Without a @supports fallback, iOS users on iOS 15.3 and earlier see a broken page.
• Anonymous layers cannot be reopened: @layer with no name creates a one-shot layer. Reopening it later creates a second anonymous layer with a different priority, which is rarely what authors intend.
• DevTools support varies: Chrome and Edge show layer names next to rules in the Styles pane, but older Firefox builds and embedded WebViews still display layered rules without the layer label, making debugging harder.

In my experience, the trap that bites teams hardest is shipping a layered design system without a @supports fallback and finding out a week later that a chunk of iOS users on iOS 15.3 saw the page with zero component styling at all.

Citations

All CSS cascade layers version numbers and platform notes in this guide come from these primary sources:

• MDN Web Docs - @layer at-rule: developer.mozilla.org/en-US/docs/Web/CSS/@layer
• MDN Web Docs - Cascade layers learning guide: developer.mozilla.org/.../Cascade_layers
• W3C CSS Cascading and Inheritance Level 5: www.w3.org/TR/css-cascade-5
• Chrome for Developers - Cascade layers are coming to your browser: developer.chrome.com/blog/cascade-layers
• Chrome Platform Status - Cascade layers: chromestatus.com/feature/5453814083256320
• WebKit blog - Release Notes for Safari Technology Preview: webkit.org/blog/12445/new-webkit-features-in-safari-15-4
• Mozilla Firefox 97 release notes: mozilla.org/en-US/firefox/97.0/releasenotes
• CSS Cascade Layers Explainer (OddBird): css.oddbird.net/layers/explainer
• Wikipedia - Cascading Style Sheets: en.wikipedia.org/wiki/Cascading_Style_Sheets
• Apple Developer - Safari 15.4 release notes: developer.apple.com/.../safari-15_4-release-notes