CSS Cascade Layers

Introduction

CSS Cascade Layers (@layer) give you explicit control over which styles take priority, regardless of specificity or source order. They add a new dimension to the cascade.

If you've ever fought with a CSS framework overriding your styles or struggled with specificity wars, layers solve that structurally.

By organizing CSS into named layers with a defined priority order, your styles always win where they should — no !important needed.

Key Concepts

Defining Layer Order

css

@layer reset, base, components, utilities;

@layer reset { * { margin: 0; box-sizing: border-box; } }
@layer base { body { font-family: system-ui; line-height: 1.5; } }
@layer components { .button { padding: 0.5rem 1rem; } }
@layer utilities { .hidden { display: none !important; } }

Importing into Layers

css

@layer reset, vendor, components;
@import url("reset.css") layer(reset);
@import url("library.css") layer(vendor);

Styles NOT in any layer have higher priority than all layered styles.

Practical Examples

1. Taming Third-Party CSS

css

@layer vendor, custom;
@import url("ui-library.css") layer(vendor);

@layer custom {
  .ui-button { border-radius: 0.5rem; font-family: inherit; }
}

2. Design System Architecture

css

@layer tokens, reset, base, layout, components, overrides;

@layer tokens { :root { --space-sm: 0.5rem; } }
@layer components { .card { padding: var(--space-md); } }
@layer overrides { .card.featured .title { font-size: 1.5rem; } }

3. Nested Layers

css

@layer framework {
  @layer base, components;
  @layer base { body { margin: 0; } }
  @layer components { .fw-button { display: inline-flex; } }
}

Best Practices

Declare layer order upfront with a single @layer statement.
Separate concerns: reset → base → layout → components → utilities.
Import third-party CSS into its own layer.
Keep unlayered CSS minimal — it beats everything.
Name layers descriptively.

Common Pitfalls

Unlayered styles beat all layers — accidental placement gives highest priority.
First @layer declaration sets the order; subsequent ones add to existing.
!important reverses layer order — earlier layers win with important.
Over-layering: start with 3-4 layers.

Browser Support

Chrome 99+, Safari 15.4+, Firefox 97+, Edge 99+. ~94% global support.

CSS Custom Properties — define tokens in a dedicated layer
CSS Nesting — combine with layers for scoped styles
CSS Grid Best Practices — layer layout styles separately