What Are Cascade Layers?

Cascade Layers (introduced with @layer) give you explicit control over which groups of styles take priority over others. Instead of fighting specificity battles, you declare the order of priority upfront.

The Problem Layers Solve

In large projects with multiple CSS sources, specificity conflicts are common:

CSS

/* Third-party library (high specificity) */
.library .widget .title { color: blue; }

/* Your override (needs even higher specificity) */
.my-app .library .widget .title { color: red; }

/* Or worse... */
.title { color: red !important; }

Cascade layers eliminate this problem by letting you define priority order regardless of specificity.

Declaring Layers

Define Layer Order

CSS

/* Declare layer order first (later = higher priority) */
@layer reset, base, components, utilities;

This single line establishes that utilities will always override components, which overrides base, which overrides reset — regardless of selector specificity.

Adding Styles to Layers

CSS

@layer reset {
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { line-height: 1.5; }
}

@layer base {
  h1 { font-size: 2.5rem; }
  p { max-width: 65ch; }
  a { color: #3498db; }
}

@layer components {
  .card {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }

  .button {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
}

@layer utilities {
  .text-center { text-align: center; }
  .mt-1 { margin-top: 0.5rem; }
  .hidden { display: none; }
}

Layer Priority

Layers declared later have higher priority:

CSS

@layer base, components, utilities;

@layer base {
  .title { color: black; }       /* Lower priority */
}

@layer components {
  .title { color: blue; }        /* Higher priority - WINS */
}

/* Even though both selectors have same specificity (0,0,1,0),
   the components layer takes priority */

Anonymous Layers

You can create layers without naming them:

CSS

@layer {
  /* Anonymous layer - can't be referenced later */
  .component { padding: 1rem; }
}

Importing into Layers

Assign imported stylesheets to specific layers:

CSS

/* Import third-party CSS into a low-priority layer */
@import url('normalize.css') layer(reset);
@import url('bootstrap.css') layer(framework);

/* Your styles in higher-priority layers automatically win */
@layer framework, custom;

@layer custom {
  .btn { background: #3498db; } /* Overrides Bootstrap easily */
}

Nested Layers

Layers can be nested for fine-grained control:

CSS

@layer components {
  @layer cards {
    .card { background: white; }
  }

  @layer buttons {
    .button { padding: 0.75rem 1.5rem; }
  }
}

/* Reference nested layers with dot notation */
@layer components.cards {
  .card { border-radius: 12px; }
}

Unlayered Styles

Styles not in any layer have the highest priority of all:

CSS

@layer base, components;

@layer components {
  .title { color: blue; }
}

/* Unlayered style - WINS over all layers */
.title { color: red; }

This is useful because your overrides don't need to be in a layer to take priority.

Practical Architecture

Recommended Layer Structure

CSS

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

@layer reset {
  /* CSS reset / normalize */
}

@layer base {
  /* Element defaults: typography, colors, links */
}

@layer layout {
  /* Page structure: grid, containers, sections */
}

@layer components {
  /* UI components: cards, buttons, forms, modals */
}

@layer utilities {
  /* Single-purpose classes: .text-center, .mt-2, .hidden */
}

/* overrides layer or unlayered styles for one-off fixes */

Third-Party Integration

CSS

/* Give third-party CSS lowest priority */
@import url('library.css') layer(vendor);

@layer vendor, custom;

@layer custom {
  /* All your styles here automatically override the library */
  .library-widget {
    color: #333; /* No specificity battle needed */
  }
}

Layers and !important

!important flips the layer order:

CSS

@layer base, components;

@layer base {
  .text { color: red !important; }  /* With !important, base has HIGHER priority */
}

@layer components {
  .text { color: blue !important; } /* Lower priority when both use !important */
}

/* Result: red wins (reversed order for !important) */

This is actually useful — it means reset/base layers can use !important to enforce critical defaults that components shouldn't override.

Revert Layer

The revert-layer keyword rolls back to the previous layer's value:

CSS

@layer base, components;

@layer base {
  .link { color: blue; }
}

@layer components {
  .link { color: red; }
  .link.reset { color: revert-layer; } /* Goes back to blue from base layer */
}

Summary

CSS Cascade Layers give you explicit control over style priority with the @layer rule. Declare layer order upfront, assign styles to layers, and later layers automatically override earlier ones — no specificity battles needed. Use layers to organize reset, base, component, and utility styles. Import third-party CSS into low-priority layers for easy overriding. Layers are the modern solution to CSS architecture at scale.