Što su cascade layers (@layer) i :is/:where selektori?

Question

Accepted Answer

Ove karakteristike daju vam eksplicitnu kontrolu nad **cascade** i **specifičnosti** — direktno rješavaju problem specifičnost-rata u velikim bazama koda.

## Zašto je to važno

`@layer` vam dozvoljava da definirate imenovane slojeve čiji red **vi** kontrolirate. Stilovi u kasnijim slojevima pobjeđuju ranije slojeve **bez obzira na specifičnost** :

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

Moć: mali-specifičnosti utility u visokom sloju može prebrisati visoko-specifičnosti pravilo u niskom sloju. To znači da vam više nisu potrebni `!important` ili hacks selektora za upravljanje redom prebrisavanja — organizirate CSS u slojeve (reset → framework → components → overrides) i red je predvidljiv.

## :where() — nula specifičnosti

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

`:where()` se podudara s argumentima ali ne dodaje **nikakvu specifičnost** — savršeno za zadane vrijednosti/resetiranja koja svako lako može prebrisati:

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

## :is() — isto podudaranje, prima najvišu specifičnost

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

`:is()` skraćuje duge liste selektora (kao `:where()`) ali **doprinosi** specifičnosti (od svog najspecifičnijeg argumenta). Dakle `:is()` za grupiranje kada želite normalnu težinu; `:where()` kada ga želite prepisivati.

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

Zajedno ova rješenja rješavaju CSS-ov najtvrđi problem održavanja — **nekontrolirana specifičnost**. `@layer` čini redoslijed prebrisavanja eksplicitnim i namjernim (više `!important` escalacije), `:where()` piše resetiranja/zadane vrijednosti koje vas nikad ne ratuju, a `:is()` čuva složene selektore DRY.

To su temeljni alati za skalabilnu, framework-friendly CSS arhitekturu.