Cascade layers

See it working

The syntax

@layer reset, components, utilities;

@layer components { .btn { background: black; } }
@layer utilities  { .bg-brand { background: blue; } }

Edit the demo’s CSS

This is the stylesheet running the demo above. Change a value and watch it. Break it on purpose: delete the modern line and you are looking at the fallback.

The demo’s CSS, editable @layer dm-components, dm-utilities; @layer dm-components { /* An id selector: very high specificity. */ #dm-layer-btn.dm-layer-btn { background: #0a0a0f; color: #fff; } } @layer dm-utilities { /* One class: low specificity. It still wins, because its LAYER comes later. */ .dm-layer-brand { background: #4f46e5; } } .dm-layer { display: grid; place-items: center; min-height: 110px; } .dm-layer-btn { font: inherit; font-weight: 700; font-size: 14px; padding: 11px 18px; border: 0; border-radius: 10px; }

ResetCopy

For browsers without it

A browser without it ignores the whole @layer block, so do not put anything inside layers that the page cannot live without unless you have checked your audience.