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.


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.



Specification link

Final published standard: Recommendation, Living Standard, Candidate Recommendation, or similar final form

Status in Chromium


In developer trial (Behind a flag) (tracking bug)

Consensus & Standardization

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


Intent to Prototype url

Intent to Prototype thread


When importing an external stylesheet into a layer, it's recommended to inline the @import rule in a <style> element, so that preload scanners can pick it up to prevent forming a chain of sequential requests of external stylesheets. There's a known bug (https://crbug.com/1277637) in an edge case that doesn't block shipping.

Search tags

css, cascade, layer, cascade-layer,

Last updated on 2022-01-21