CSS Cascade Layers

Cascade layers (@layer) divide CSS into explicitly ordered layers. Styles in a later layer override earlier layers, regardless of selector specificity. This solves the classic problem of third-party CSS specificity battles — by putting third-party styles in an early layer, your own styles always win. In discussions: 'put it in a layer' means use @layer utilities { ... } to control cascade order.

Declaring @layer base, components, utilities at the top of a stylesheet establishes the cascade order: later-listed layers have higher priority. utilities wins over components which wins over base. This happens regardless of where the actual CSS rules appear in the file or their selector specificity. It's a way to make cascade order explicit and predictable.

CSS unlayered styles (written outside any @layer) automatically have higher cascade priority than any layered style. This is by design — if you add @layer to adopt a framework but write your own styles normally, your styles always win. In migration discussions: 'move your overrides outside any layer' is advice to ensure they always take precedence.

revert-layer is a CSS keyword that acts like revert but only within the cascade layer context — it removes the current layer's contribution, revealing what the next lower layer would have set. Useful in component libraries where you want to offer a 'clean slate' within a layer. In discussions: 'use revert-layer' means opt out of a layer's styles for specific properties.

Layer imports use the syntax @import 'library.css' layer(third-party) to immediately assign all imported styles to a named layer. This is the cleanest way to adopt a CSS library without specificity battles — all its rules sit in a lower-priority layer than your own unlayered styles. In discussions: 'import it into a layer' means use this pattern rather than manually wrapping each imported file.