Kaj so cascade layers (@layer) in selektorji :is/:where?

Question

Accepted Answer

Te funkcionalnosti vam dajejo izrecen nadzor nad **cascade** in **specifičnostjo** — direktno napadajajo problem specifičnostnih vojn v velikih kodnih bazah.

## @layer — izrecno urejanje cascade

`@layer` vam omogoča определiti poimenovane plasti, katerih vrstni red *vi* nadzirujete. Stili v poznejši plasti premagajo zgodnje plasti **ne glede 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č: nizko specifičen utility v visoki plasti lahko preglasi visoko specifično pravilo v nizki plasti. To pomeni, da ne potrebujete več `!important` ali selektorskih trikov za upravljanje vrstnega reda prepisa — organzizirate CSS v plasti (reset → framework → komponente → overrides) in vrstni red je napovedljiv.

## :where() — ničelna specifičnost

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

`:where()` se ujema s svojimi argumenti, vendar doda **nikakršne specifičnosti** — popolno za privzete vrednosti/ponastavitve, ki jih lahko vsakdo enostavno preglasi:

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

## :is() — enako ujemanje, sprejme največjo specifičnost

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

`:is()` skrajša dolge sezname selektorjev (kot `:where()`) vendar **prispeva** specifičnost (tisto svojega najbolj specifičnega argumenta). Zato `:is()` za skupiniranje, kadar želite normalno težo; `:where()` kadar jo želite spremenljivo.

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

## Zakaj je to važno

Skupaj te rešitve CSS-ov najtežji problem vzdrževanja — **nekontrolirane specifičnosti**. `@layer` naredi vrstni red prepisa izrecen in namenski (brez več eskalacije `!important`), `:where()` piše ponastavitve/privzete vrednosti, ki se nikoli ne spoprijemajo z vami, in `:is()` drži kompleksne selektorje DRY.

So temeljna orodja za lestvično in arhitekturo CSS-a, prijazno ogrodjem.