← Back to release summary

CSS cascade layers

Category
CSS
Type
Chromium catches up
Status
Enabled by default (Chrome 99)
Intent stage
Shipped

Summary

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.

Standards & signals

Docs: https://bit.ly/2SGjPlu

Explainers: https://gist.github.com/xiaochengh/58c793e3bf06a1bb0f7d472ebb170feb

View on chromestatus.com