CSS `@layer`

Cascade layers let you control style priority independent of selector specificity—and replace the need for !important escalation.

Browser Support Cascade layers are supported in all modern browsers since March 2022 (Chrome 99+, Firefox 97+, Safari 15.4+).

What is @layer?

The @layer at-rule lets you organize CSS into named cascade layers. Layers have explicit precedence: the first declared layer has the lowest priority, and the last declared layer has the highest. Un-layered styles always override layered styles.

The key insight: once layer order is established, the cascade ignores selector specificity within layers. A rule in a later layer wins over a rule in an earlier layer—even if the earlier rule has a more specific selector. This lets you use simpler selectors and avoid specificity hacks.

!important vs @layer

With !important, you create an override war. To override a style that uses !important, you need another !important. This leads to specificity escalation and CSS that becomes hard to maintain—especially when mixing third-party styles, design systems, and utilities.

With @layer, you define layer order once (e.g. @layer base, components, utilities;). Later layers override earlier layers without any !important. It’s the modern, maintainable way to control precedence when working with multiple CSS sources.

Note: when !important is used, layer priority reverses—the first declared layer with !important wins. This can be useful when you want a base layer to “win back” over overrides in certain cases.

With !important

Override war

To override a style that uses !important, you need another !important. This leads to specificity escalation and hard-to-maintain CSS.

.card.card--danger

/* Escalation begins */
.card {
  background: #e0e7ff !important;
}

.card--danger {
  background: #fecaca !important;
}

With @layer

Maintainable

Layer order controls precedence. Rules in later layers win over earlier ones—regardless of selector specificity. No !important needed.

.card.card--danger

@layer base, overrides;

@layer base {
  .card {
    background: #e0e7ff;
    padding: 1rem;
  }
}

@layer overrides {
  .card--danger {
    background: #fecaca;
  }
}