What are cascade layers (@layer) and the :is/:where selectors?

Question

Accepted Answer

These features give you explicit control over the **cascade** and **specificity** — directly attacking the specificity-war problem in large codebases.

## @layer — explicit cascade ordering

`@layer` lets you define named layers whose order *you* control. Styles in a later layer beat earlier layers **regardless of specificity**:

```css
@layer reset, base, components, utilities; /* declare order: later = higher priority */

@layer base {
  a { color: blue; }            /* even though this is defined... */
}
@layer components {
  .link { color: green; }       /* ...this wins because `components` > `base`, */
}                                /* even though .link isn't more specific by itself */
```

The power: a low-specificity utility in a high layer can override a high-specificity rule in a low layer. This means you no longer need `!important` or selector hacks to manage override order — you organize CSS into layers (reset → framework → components → overrides) and the order is predictable.

## :where() — zero specificity

```css
:where(.a, .b, .c) p { color: red; } /* specificity contribution: 0,0,0 */
```

`:where()` matches its arguments but adds **no specificity** — perfect for defaults/resets that anyone can easily override:

```css
:where(ul) { margin: 0; } /* a reset that ANY later rule beats effortlessly */
```

## :is() — same matching, takes highest specificity

```css
:is(h1, h2, h3) a { } /* matches the same elements, but specificity = the most specific arg */
```

`:is()` shortens long selector lists (like `:where()`) but **does** contribute specificity (that of its most specific argument). So `:is()` for grouping when you want normal weight; `:where()` when you want it overridable.

## :is vs :where

```css
:is(#id, .class) p { }   /* specificity: 1,0,0 (the #id counts) */
:where(#id, .class) p { }/* specificity: 0,0,0 (always zero) */
```

## Why it matters

Together these solve CSS's hardest maintenance problem — **uncontrolled specificity**. `@layer` makes override order explicit and intentional (no more `!important` escalation), `:where()` writes resets/defaults that never fight you, and `:is()` keeps complex selectors DRY.

They're foundational tools for scalable, framework-friendly CSS architecture.