Ce sunt cascade layers (@layer) și selectorii :is/:where?

Question

Accepted Answer

Aceste funcționalități îți dau control **explicit** asupra **cascade** și **specificității** — atacând direct problema specificity-war din codebases-urile mari.

## @layer — ordonare explicită a cascade

`@layer` te permite să definești straturi numite ale căror ordine *tu* le controlezi. Stilurile dintr-un strat ulterior învinge straturile anterioare **indiferent de specificitate**:

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

Puterea: un utilitar cu specificitate scăzută într-un strat înalt poate suprascrie o regulă cu specificitate înaltă într-un strat scăzut. Asta înseamnă că nu mai ai nevoie de `!important` sau trucuri de selector pentru a gestiona ordinea suprascrierii — organizezi CSS în straturi (reset → framework → components → overrides) și ordinea este previzibilă.

## :where() — specificitate zero

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

`:where()` se potrivește cu argumentele sale, dar nu adaugă **nicio specificitate** — perfect pentru valori implicite/resetări pe care oricine le poate ușor suprascrie:

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

## :is() — aceeași potrivire, ia cea mai mare specificitate

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

`:is()` scurtează liste lungi de selectors (ca `:where()`) dar **contribuie** la specificitate (cea a argumentului său cel mai specific). Deci `:is()` pentru grupare când vrei greutate normală; `:where()` când vrei ca aceasta să fie ușor suprascrisa.

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

## De ce este important

Împreună, aceste rezolvă cea mai dificilă problemă de întreținere a CSS — **specificitate necontrolată**. `@layer` face ordinea suprascrierii explicită și intenționată (fără mai mult escalation cu `!important`), `:where()` scrie resetări/valori implicite care nu se ceartă niciodată cu tine, iar `:is()` ține selectorii complecși DRY.

Sunt instrumente fundamentale pentru arhitectură CSS scalabilă și prietenoasă cu framework-urile.