CSS Cascade layers are coming to Firefox 97 and Chrome 99

CSS Cascade Layers are coming to Firefox 97, Chrome 99, and Safari (TP) to help authors have control over the layers that they need in the Cascade.

What are CSS Cascade Layers?

Cascade layers are CSS designs that help developers to specify and organize their CSS architecture.  Initially, most CSS developers had to rely on the important rule to specify which CSS property should take precedence.

With Cascade layers, you can split CSS into several layers using  @layer at-rule and use the layers for specificity.

You can define a layer, give it a name and add styles using @layer at-rule or import syntax. Layers priority is based on when a layer first appeared in the structure.

Miriam a CSS expert had this to say on Twitter about Cascade Layers, “Cascade Layers aren’t cumulative like selectors, and they’re not binary like importance. They’re ordered and can be nested in self-contained groups. Adding more layers doesn’t make something more important. Layers don’t *escalate*, they just re-arrange”

To learn more on how CS Cascade Layers work with practical examples, read this post on W3C:  Cascade Layers.

CSS Cascade layers  Browser Support: As of writing this post, Cascade layers are supported in Firefox 97, Chrome 99, and Safari technology preview (TP).