Hvad er cascade layers (@layer) og :is/:where selektorer?

Question

Accepted Answer

Disse features giver dig eksplicit kontrol over **cascade** og **specificity** — direkte angreb på specificity-war problemet i store codebases.

## @layer — eksplicit cascade rækkefølge

`@layer` lader dig definere navngivne lag hvis rækkefølge *du* styrer. Stilarter i et senere lag slår tidligere lag **uanset 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 */
```

Kraften: et low-specificity utility i et højt lag kan tilsidesætte en high-specificity regel i et lavt lag. Det betyder, at du ikke længere har brug for `!important` eller selector hacks til at styre override rækkefølge — du organiserer CSS i lag (reset → framework → components → overrides) og rækkefølgen er forudsigelig.

## :where() — nul specificity

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

`:where()` matcher sine argumenter men tilføjer **ingen specificity** — perfekt til defaults/resets som alle nemt kan tilsidesætte:

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

## :is() — samme matching, tager højeste specificity

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

`:is()` forkorter lange selector lister (ligesom `:where()`) men **bidrager** til specificity (af sit mest specifikt argument). Så `:is()` til gruppering når du vil have normal vægt; `:where()` når du vil have det tilsidesætteligt.

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

## Hvorfor det betyder noget

Tilsammen løser disse CSS's sværeste vedligeholdelses problem — **ukontrolleret specificity**. `@layer` gør override rækkefølge eksplicit og bevidst (ikke mere `!important` eskalering), `:where()` skriver resets/defaults som aldrig kæmper imod dig, og `:is()` holder komplekse selektorer DRY.

De er grundlæggende værktøjer til skalerbar, framework-venlig CSS arkitektur.