CSS cascade layers (@layer rule and layered @import syntax) provide a structured way to organize and balance concerns within a single origin. Rules within a single cascade layer cascade together without interleaving with style rules outside the layer. This allows authors to achieve a certain cascade ordering for same-origin rules in a proper way.

Motivation

Cascade layers allow authors to create layers to represent element defaults, third-party libraries, themes, components, overrides, and etc.—and are able to re-order the cascade of layers in an explicit way. Without cascade layers, currently authors need to tweak, e.g., selector specificity, !import or source ordering to achieve a certain cascade ordering, which is cumbersome and error-prone.

Documentation

Specification

Specification link


Specification currently under development in a Working Group

Status in Chromium

Blink>CSS


No active development (tracking bug)

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

Owner

Intent to Prototype url

Intent to Prototype thread

Comments

We will not implement the 'revert-layer' keyword due to its complexity and likely negative performance impact.

Search tags

css, cascade, layer, cascade-layer,

Last updated on 2021-08-30