Co jsou kaskádové vrstvy (@layer) a selektory :is/:where?

Question

Accepted Answer

Tyto funkce vám dávají explicitní kontrolu nad **kaskádou** a **specificitou** — přímo řeší problém specificity-war ve velkých kódbázích.

## @layer — explicitní řazení kaskády

`@layer` vám umožňuje definovat pojmenované vrstvy, jejichž pořadí *vy* kontrolujete. Styly v pozdější vrstvě překonávají dřívější vrstvy **bez ohledu na specifitu**:

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

Moc: utility s nízkou specifitou ve vysoké vrstvě může přepsat pravidlo s vysokou specifitou v nízké vrstvě. To znamená, že už nepotřebujete `!important` nebo selektory hacky na správu pořadí přepsání — CSS organizujete do vrstev (reset → framework → components → overrides) a pořadí je předvídatelné.

## :where() — nulová specifita

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

`:where()` odpovídá svým argumentům, ale přidává **žádnou specifitu** — ideální pro výchozí hodnoty/resets, které kdokoli snadno přepíše:

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

## :is() — stejné párování, bere nejvyšší specifitu

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

`:is()` zkracuje dlouhé seznamy selektorů (jako `:where()`) ale **přispívá** k specifitě (ta nejkonkretnějšího argumentu). Takže `:is()` pro seskupování, když chcete normální váhu; `:where()` když chcete, aby to bylo přepsatelné.

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

## Proč na tom záleží

Dohromady tyto řeší nejtěžší problém údržby CSS — **nekontrolovanou specifitu**. `@layer` dělá pořadí přepsání explicitním a záměrným (ne více `!important` eskalace), `:where()` píše resets/defaults, které vás nikdy nezpochybňují, a `:is()` udržuje složité selektory DRY.

Jsou to základní nástroje pro škálovatelnou, framework-přátelskou CSS architekturu.