Vad är cascade layers (@layer) och :is/:where selektorerna?

Question

Accepted Answer

Dessa funktioner ger dig explicit kontroll över **cascade** och **specificity** — och attackerar direkt specificity-kriegs-problemet i stora kodbaser.

## @layer — explicit cascade-ordning

`@layer` låter dig definiera namngivna lager vars ordning *du* kontrollerar. Stilar i ett senare lager slår tidigare lager **oavsett 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: en låg-specificity utility i ett högt lager kan åsidosätta en högt-specificity regel i ett lågt lager. Det betyder att du inte längre behöver `!important` eller selektorhack för att hantera åsidosättningsordning — du organiserar CSS i lager (reset → framework → komponenter → overrides) och ordningen är förutsägbar.

## :where() — noll specificity

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

`:where()` matchar sina argument men lägger till **ingen specificity** — perfekt för standardvärden/reset som vem som helst kan åsidosätta:

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

## :is() — samma matchning, tar högsta specificity

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

`:is()` förkortar långa selectorlistor (som `:where()`) men **bidrar** specificity (den högsta specificityn från dess argument). Så använd `:is()` för gruppering när du vill ha normal vikt; `:where()` när du vill att det ska kunna åsidosättas.

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

## Varför det spelar roll

Tillsammans löser dessa CSS:s svåraste underhållsproblem — **okontrollerad specificity**. `@layer` gör åsidosättningsordningen explicit och avsiktlig (ingen mer `!important` eskalering), `:where()` skriver reset/standardvärden som aldrig slåss med dig, och `:is()` håller komplexa selektorer DRY.

De är grundläggande verktyg för skalbar, ramverk-vänlig CSS-arkitektur.