Selectors and the cascade

Cascade layers

Widely availablesince Sept 2024

Replaces: Specificity escalation and !important. Layers decide which stylesheet wins before specificity is consulted, so a reset can never beat a component.

See it working

The syntax

@layer reset, components, utilities;

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

The demo’s full CSS

@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; }

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.