Mitä ovat cascade layerit (@layer) ja :is/:where -selektorit?

Question

Accepted Answer

Nämä ominaisuudet antavat sinulle eksplisiittisen hallinnan **kaskaadiin** ja **spesifisyyteen** — suoraan hyökkäävät spesifisyyden sotaan suurissa koodikannoissa.

## @layer — eksplisiittinen kaskaadin järjestys

`@layer` antaa sinulle mahdollisuuden määritellä nimetyt kerrokset, joiden järjestystä *sinä* kontrolloit. Myöhemmän kerroksen tyyleet voittavat aiemmat kerrokset **spesifisyydestä riippumatta**:

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

Voima: matalan spesifisyyden hyöty korkealla kerroksella voi kumota korkean spesifisyyden säännön matalalla kerroksella. Tämä tarkoittaa, että et enää tarvitse `!important` tai selektoritemppuja hallitaksesi ohituksen järjestystä — järjestät CSS:n kerroksiin (reset → framework → components → overrides) ja järjestys on ennustettava.

## :where() — nolla spesifisyysi

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

`:where()` vastaa sen argumentteihin mutta lisää **nolla spesifisyyttä** — täydellinen oletuksille/nollauksille, jotka kuka tahansa voi helposti ohittaa:

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

## :is() — sama vastaavuus, ottaa korkein spesifisyys

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

`:is()` lyhentää pitkiä selektoriluetteloita (kuten `:where()`) mutta **lisää** spesifisyyteen (sen eniten spesifisen argumentin). Joten `:is()` ryhmittelyyn kun haluat normaalia painoa; `:where()` kun haluat sen ohitettavaksi.

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

## Miksi sillä on merkitystä

Yhdessä nämä ratkaisevat CSS:n vaikeimman ylläpitoongelman — **hallitsemattoman spesifisyyden**. `@layer` tekee ohituksen järjestyksestä eksplisiittisen ja tarkoituksellisen (ei enää `!important` -kiihtymistä), `:where()` kirjoittaa nollauksia/oletuksia, jotka eivät koskaan taistele sinua vastaan, ja `:is()` pitää monimutkaiset selektorit DRY:nä.

Ne ovat perustyökaluja skaalautuvalle, kehystyöille ystävälliselle CSS-arkkitehtuurille.