revert‑layer & @layer Debugger - Online Visual Specificity

@layer defines explicit cascade layers, letting you control the order in which CSS rules are applied regardless of specificity. It's perfect for managing large codebases where you want framework styles, component styles, and utility overrides to cascade predictably. Without @layer, a highly specific selector deep in your framework could accidentally override your utility classes. With @layer, you declare the priority order upfront.

revert-layer rolls back a property to the value it would have had in the previous cascade layer. The standard revert keyword rolls back all the way to the browser's user-agent default. If you have layers base → components → utilities, using revert-layer in the utilities layer goes back to the components layer's value, while revert would skip all layers and use the browser default.

!important reverses layer priority! Normally, later-declared layers win. But with !important, earlier-declared layers take precedence. This is by design: the cascade gives more weight to "important" declarations from lower-priority sources. Unlayered !important styles still beat all layered !important styles. This tool lets you test this behavior visually.

Specificity is calculated the same way inside layers as outside: counting IDs (a), classes/attributes/pseudo-classes (b), and element types/pseudo-elements (c) to form an (a,b,c) triplet. However, layer priority is resolved before specificity. A rule in a higher-priority layer always beats a rule in a lower-priority layer, even if the lower layer's rule has higher specificity.

@layer is supported in all modern browsers: Chrome 99+, Firefox 97+, Safari 15.4+, Edge 99+. revert-layer is supported in Chrome 106+, Firefox 97+, Safari 16.2+, and Edge 106+. As of 2024, global support exceeds 92%. For older browsers, these features degrade gracefully—styles simply cascade normally without layer awareness.

Yes! You can nest layers using dot notation: @layer framework.base { ... } and @layer framework.components { ... }. Nested layers inherit their parent's position in the cascade. You can also nest using block syntax: @layer framework { @layer base { ... } }. This creates layers named framework.base and framework.components.

Unlayered styles always beat layered styles (except for !important, where layered !important beats unlayered normal styles). This means any CSS you write outside of any @layer has the highest priority. This is why many developers place their utility or override styles outside layers, while organizing framework and component styles into named layers.

Common patterns: (1) Framework layering—put Bootstrap/Tailwind base in a low-priority layer so your custom styles easily override. (2) Design system—organize into reset → tokens → elements → components → utilities. (3) Third-party CSS—wrap vendor CSS in a low-priority layer to prevent conflicts. (4) Theming—place theme overrides in a dedicated layer.

revert-layer is ideal for component systems. When a component in a higher layer wants to "opt out" of its own styles for a specific property and inherit from the lower layer, it uses revert-layer. For example, a utility class might reset padding back to the component layer's value without knowing what that value is, enabling flexible composability.

Layer priority always wins over specificity. The cascade evaluates: (1) origin & importance, (2) context (shadow DOM), (3) style attribute, (4) layers, (5) specificity, (6) order of appearance. So a simple .box { color: red } in a higher-priority layer beats #unique-id .box { color: blue } in a lower-priority layer. This is the core value proposition of @layer.