Design Atlas
한국어
{} Modern CSS & web APIs

Cascade Layers

캐스케이드 레이어

Groups styles into named `@layer` layers so priority is decided by layer order, not selector specificity.

Also known as: @layer
···
html
<div class="wrap">
  <div class="badge" id="badge"><svg viewBox="0 0 10 10"><path id="bpath" d="M1.5 5.2l2.6 2.6L8.5 2.4" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg><span id="btext">확인 중</span></div>
  <div id="chip" class="chip">낮은 특이도가 이깁니다</div>
</div>
css
@layer base, utilities;
@layer base{ #chip.a{ background:var(--accent-2); color:#fff } }
@layer utilities{ .chip{ background:var(--accent-3); color:#0a0a12 } }
.wrap{position:relative;width:100%;height:100%;display:grid;place-items:center}
.chip{padding:12px 18px;border-radius:10px;font-size:12px;font-weight:700;transition:background .3s,color .3s}
.chip.fallback{background:var(--accent-2)!important;color:#fff!important}
.badge{position:absolute;top:10px;right:10px;display:flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;font-size:10px;font-weight:700;background:var(--bg);border:1px solid var(--line);color:var(--accent-3);z-index:2}
.badge.no{color:var(--accent-2)}
.badge svg{width:9px;height:9px}
js
const ok = typeof CSSLayerBlockRule !== 'undefined';
const b=document.getElementById('badge'),p=document.getElementById('bpath'),t=document.getElementById('btext');
b.classList.toggle('no', !ok);
p.setAttribute('d', ok ? 'M1.5 5.2l2.6 2.6L8.5 2.4' : 'M2 2l6 6M8 2l-6 6');
t.textContent = ok ? '@layer 지원됨 — 나중 층 승리' : '미지원 · !important 폴백';
const chip = document.getElementById('chip');
chip.classList.add('a');
if (!ok) chip.classList.add('fallback');

Mix a CSS reset, a design system, components, and utility classes in one project and specificity wars follow. Making a utility class like `.text-red` beat a component rule like `.card .title` usually meant reaching for `!important` or deliberately bloating the selector.

Declare order upfront with `@layer reset, base, components, utilities;`, and afterward a later layer beats an earlier one no matter how low its specificity is inside that layer — specificity only matters within a layer; priority between layers is purely declaration order. Utility frameworks like Tailwind use layers internally for exactly this.

Check caniuse/MDN baseline for support. Without it, the only option remains what's always worked: managing load order carefully and designing specificity by hand.

When to use

Deciding priority in a large project mixing resets, a design system, and utility classes — without `!important`.