CSS Cascade Layer Planner

Name up to eight layers, add their CSS rules and move them into declaration order. Copy the generated @layer declaration and blocks into your stylesheet.

Runs locally in your browser

View category: Frontend & Design (34)

· @layer · declaration order · cascade priority

CASCADE PLAN

LAYER STACK

EXPORT CSS

How to order cascade layers and copy the @layer plan

The planner keeps one list of cascade layers. Each entry carries a name and the rules that belong to it, and the export writes a single statement — @layer reset, tokens, base, components, utilities; — followed by one block per layer in that order. The stack on the right is the same list read top to bottom: the first card is declared first, the last card wins when two layers set the same property.

The plan starts with five layers, reset, tokens, base, components and utilities, each with one short demo rule, and the fourth one is selected. There is no run button: the stack, the readout and the Generated code pane follow every keystroke, and Copy CSS puts that text on the clipboard.

Pick a layer in the Active layer selector. The options are numbered in declaration order, from the first layer to the last.

Rename it in Layer name. The field stops at 36 characters, and the export lowercases the name, turns spaces and punctuation into -, prefixes a leading digit with x- and falls back to layer when the field is empty.

Paste that layer’s declarations into Layer rules. Every non-empty line is indented two spaces inside the exported block; the field is plain text, so nothing is validated or reordered.

Add layer and Remove layer move the list between one and eight entries: a ninth click answers with the limit and the last removal keeps the remaining layer. Move earlier and Move later reorder the selected layer and leave it selected.

Press Copy CSS to take the whole plan, or Reset to return to the five default layers.

Declaration order, layer priority and the exported rules

Declaration order decides the priority

Cascade layers are resolved in the order they are declared, so the layer named last in the statement is the one that wins when both set the same property. The stack labels the two ends of that order — First declared · lower priority on the first card, Last declared · higher priority on the last — while the layers in between carry a plain @layer badge.

Move earlier and Move later shift the selected layer one position at a time, and the declaration line at the top of the export is rewritten immediately: the layers you see in the stack are exactly the names in the statement, in that order.

Names, rules and the two limits

A layer name becomes a CSS identifier: the planner lowercases it, replaces anything outside a-z, 0-9, _ and - with a hyphen, trims hyphens from both ends and prefixes x- when the name starts with a digit. Typing MAIN LAYER therefore exports main-layer, and a field left empty exports layer.

The workbench enforces two limits: one plan holds between one and eight layers, and the name field stops at 36 characters. Removing the last layer or adding a ninth leaves the plan untouched and prints the reason above the shell.

Two layers with the same name, and local processing

Renaming a layer to a name another layer already uses is allowed, but the export then repeats that name and the browser merges the two blocks into a single layer: the rules of both cards end up in one layer. The workbench prints an inline note as soon as that happens, so the duplicate is visible before it is copied.

The plan never leaves the page: the layer list, the rules and the generated statement are built in the browser, Copy CSS writes them straight to the clipboard, and there is no upload step, account or run button. Reset brings back the five default layers at any time.