Wat zijn cascade layers (@layer) en de :is/:where selectors?

Question

Accepted Answer

Deze functies geven je expliciete controle over de **cascade** en **specificiteit** — je pakt direct het specificiteit-oorlogsprobleem in grote codebases aan.

## Waarom het belangrijk is

`@layer` laat je benoemde lagen definiëren waarvan de volgorde *jij* bepaalt. Stijlen in een latere laag verslaan eerdere lagen **ongeacht specificiteit**:

```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 */
```

De kracht: een laag-specificiteit utility in een hoge laag kan een hoog-specificiteit regel in een lage laag overschrijven. Dit betekent dat je niet langer `!important` of selector hacks nodig hebt om override-volgorde te beheren — je organiseert CSS in lagen (reset → framework → components → overrides) en de volgorde is voorspelbaar.

## :where() — nul specificiteit

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

`:where()` matcht zijn argumenten maar voegt **geen specificiteit** toe — perfect voor defaults/resets die iedereen makkelijk kan overschrijven:

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

## :is() — dezelfde matching, neemt hoogste specificiteit

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

`:is()` verkortet lange selectorlijsten (zoals `:where()`) maar **draagt wel** specificiteit bij (die van het meest specifieke argument). Dus `:is()` voor groepering wanneer je normaal gewicht wilt; `:where()` wanneer je wilt dat het overschrijfbaar is.

## :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) */
```

Tegelijk lossen deze CSS's moeilijkste onderhoudsoprob op — **ongecontroleerde specificiteit**. `@layer` maakt override-volgorde expliciet en opzettelijk (geen `!important` escalatie meer), `:where()` schrijft resets/defaults die je nooit tegen je zeggen, en `:is()` houdt complexe selectors DRY.

Ze zijn basistools voor schaalbare, framework-vriendelijke CSS-architectuur.