Hva er cascade layers (@layer) og :is/:where selektorene?

Question

Accepted Answer

Disse funksjonene gir deg eksplisitt kontroll over **cascade** og **spesifisitet** — angriper direkte spesifisitetskrigsproblemer i store kodebaser.

## @layer — eksplisitt cascade-sortering

`@layer` lar deg definere navngitte lag hvis rekkefølge *du* kontrollerer. Stiler i et senere lag slår tidligere lag **uavhengig av spesifisitet**:

```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: en lav-spesifisitet utility i et høyt lag kan overstyre en høy-spesifisitet regel i et lavt lag. Dette betyr at du ikke lenger trenger `!important` eller selektor-hack for å håndtere overstyring — du organiserer CSS i lag (reset → framework → components → overrides) og rekkefølgen er forutsigbar.

## :where() — null spesifisitet

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

`:where()` matcher argumentene sine men legger til **ingen spesifisitet** — perfekt for defaults/resets som hvem som helst enkelt kan overstyre:

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

## :is() — samme matching, tar høyeste spesifisitet

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

`:is()` forkorter lange selektor-lister (som `:where()`) men **bidrar** spesifisitet (av sitt mest spesifikke argument). Så `:is()` for gruppering når du vil ha normal vekt; `:where()` når du vil at det skal kunne overstyres.

## :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 betyr noe

Tilsammen løser disse CSS sitt vanskeligste vedlikeholdsproblem — **ukontrollert spesifisitet**. `@layer` gjør overstyring eksplisitt og intentional (ikke mer `!important` eskalering), `:where()` skriver resets/defaults som aldri slåss med deg, og `:is()` holder komplekse selektorer DRY.

De er grunnleggende verktøy for skalerbar, rammeverk-vennlig CSS-arkitektur.