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


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

Status in Chromium

Blink>CSS


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.

Owner

Intent to Prototype url

Intent to Prototype thread

Comments

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