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

@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

@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

@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

@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

@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

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

Browser Support

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

Related Guides

• 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