CSS Cascade Layers Generator

How the Cascade Layers Generator works

Most CSS conflicts come from specificity. A component rule written as .card .badge beats a utility class like .badge-accent because it has two classes against one, so teams reach for !important or longer selectors to win. Cascade layers break that arms race. Styles in a later layer beat styles in an earlier layer regardless of how specific the selectors are, so the order you declare once at the top of the stylesheet becomes the main rule for who wins.

The @layer rule has been supported since 2022 in Chrome and Edge 99, Firefox 97 and Safari 15.4, so it is safe for almost every site today.

How to use the CSS cascade layers generator

1. Type your layer names, lowest priority first, separated by commas.
2. Choose whether to write the styles in layer blocks or import separate files into layers.
3. Set an accent colour to see the demo update.
4. Copy the code and put it at the very top of your main stylesheet.

What the output contains

Known names get starter rules. reset gets box sizing and margin resets, base gets body type and link colour, and theme or tokens gets a custom property. Any other name gets an empty block to fill in. The second-to-last and last layers get the demo badge rules, so you can see a simple class in the top layer beat a more specific selector in the layer below it.

How the cascade decides now

Browsers compare these in order and stop at the first difference:

1. Origin and importance, such as user-agent styles against author styles, and !important.
2. Context, such as Shadow DOM scoping.
3. Layer order. Later layers beat earlier ones, and unlayered styles beat all layers.
4. Specificity, which is now only compared within the same layer.
5. Source order, the last rule wins.

Layer order sits above specificity, which is why the demo works.

Tips and pitfalls

Declare the order first. A layer's position is fixed the first time its name appears. If an @layer utilities { } block happens to be read before the order statement, utilities lands at the bottom. Putting the full order statement at the top of the first stylesheet avoids surprises.

Unlayered CSS wins. Any rule not inside a layer beats every layered rule. That is useful for quick overrides, but it also means an old unlayered stylesheet will override your carefully ordered layers. Move older CSS into a legacy layer to tame it.

!important reverses the order. Important declarations in an earlier layer beat important declarations in a later one. That lets a reset layer protect critical rules, such as accessibility settings, but it surprises people. Avoid !important inside layers unless you mean it.

Third-party CSS fits neatly. Import a framework into an early layer with @import url("framework.css") layer(framework); and your own components in a later layer will override it without fighting its selectors.

Imports must come first. @import rules must appear before any other rule except @charset and @layer statements. Put the order statement first and the imports straight after.

Nested layers. A name like components.cards creates a sub-layer, and the dotted name in the order statement controls its position inside its parent layer.

Reading the result

The code panel shows the full stylesheet skeleton in the order the browser will read it. The demo card lists your layers from lowest to highest priority, and the badge shows the colour from your last layer, even though the rule in the layer below it has a more specific selector.

Related tools