Kas yra kaskados sluoksniai (@layer) ir :is/:where selektoriai?

Question

Accepted Answer

Šios funkcijos suteikia jums aiškią kontrolę ties **kaskada** ir **specifinama** — tiesiogiai sprendžiant specifinumo karo problemą didelėse kodų bazėse.

## Kodėl tai svarbu

`@layer` leidžia jums apibrėžti pavadintus sluoksnius, kurių tvarką *jūs* kontroliuojate. Stiliai vėlesniame sluoksnyje nugali ankstesnius sluoksnius **neatsižvelgiant į specifinumą**:

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

Galia: žemo specifinumo serveris aukštesniame sluoksnyje gali nepaisyti aukšto specifinumo taisyklės žemesniame sluoksnyje. Tai reiškia, kad jums nebereikia `!important` ar selektoriaus triukų valdyti perrašymo tvarką — organizuojate CSS į sluoksnius (reset → framework → components → overrides) ir tvarka yra nuspėjama.

## :where() — nulis specifinumo

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

`:where()` atitinka jo argumentus, bet neprideda **jokio specifinumo** — puiku numatymiesiems/nustatytiems parametrams, kuriuos bet kas gali lengvai perrašyti:

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

## :is() — toks pats atitikimas, turi aukščiausią specifinumą

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

`:is()` sutrumpina ilgus selektoriaus sąrašus (kaip `:where()`) bet **prisideda** prie specifinumo (jo labiausiai specifinio argumento). Taigi naudokite `:is()` grupavimui, kai norite normalaus svorio; `:where()`, kai norite, kad jis būtų perrašomas.

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