Widely availableSupported across all major browsers. Safe to use in production.
Syntax and cascade Widely available

Cascade layers

The @layer CSS at-rule avoids specificity conflicts by providing priority levels for different groups of CSS rules, such as low-priority styles like resets, and high-priority styles like UI components.

Syntax and cascade

Overview

The @layer CSS at-rule avoids specificity conflicts by providing priority levels for different groups of CSS rules, such as low-priority styles like resets, and high-priority styles like UI components.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
@layer
99
99
97
15.4
99
15.4
DOM API
layerName

The read-only layerName property of the CSSImportRule interface returns the name of the cascade layer created by the @import at-rule.
99
99
97
15.4
99
15.4
CSSLayerBlockRule

The CSSLayerBlockRule represents a @layer block rule.
99
99
97
15.4
99
15.4
name

The read-only name property of the CSSLayerBlockRule interface represents the name of the associated cascade layer.
99
99
97
15.4
99
15.4
CSSLayerStatementRule

The CSSLayerStatementRule represents a @layer statement rule. Unlike CSSLayerBlockRule, it doesn't contain other rules and merely defines one or several layers by providing their names.
99
99
97
15.4
99
15.4
nameList

The read-only nameList property of the CSSLayerStatementRule interface return the list of associated cascade layer names. The names can't be modified.
99
99
97
15.4
99
15.4
CSS at-rule
layer

The layer() CSS function is used along with the @import at-rule to put the imported resource in a separate named cascade layer.
99
99
97
15.4
99
15.4
CSS type
revert-layer

The revert-layer CSS-wide keyword rolls back the value of a property in a cascade layer to the value of the property in a CSS rule matching the element in a previous cascade layer. The value of a property with this keyword is recalculated as if no rules were specified on the target element in the current cascade layer.
99
99
97
15.4
99
15.4
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
/* Declare layer priorities */
@layer reset, base, components, utilities;

@layer reset {
  * { margin: 0; padding: 0; box-sizing: border-box; }
}

@layer base {
  body { font-family: system-ui, sans-serif; line-height: 1.6; }
  a { color: var(--color-primary); }
}

@layer components {
  .btn { padding: 8px 16px; border-radius: 6px; }
  .card { padding: 1rem; border: 1px solid #e5e7eb; }
}

@layer utilities {
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
}

Live demo

@layer base

Cascade Layers (@layer) @layer base demo.

PreviewFullscreen

@layer components

Cascade Layers (@layer) @layer components demo.

PreviewFullscreen

@layer utilities

Cascade Layers (@layer) @layer utilities demo.

PreviewFullscreen

Use cases

  • Using Cascade layers

    The @layer CSS at-rule avoids specificity conflicts by providing priority levels for different groups of CSS rules, such as low-priority styles like resets, and high-priority styles like UI components.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links

Powered by web-features