Quali sono i cascade layer (@layer) e i selettori :is/:where?

Question

Accepted Answer

Queste funzionalità ti danno il controllo esplicito sulla **cascade** e sulla **specificità** — affrontando direttamente il problema della guerra di specificità nei grandi codebase.

## Perché è importante

`@layer` ti permette di definire layer denominati il cui ordine *tu* controlli. Gli stili in un layer successivo battono i layer precedenti **indipendentemente dalla specificità**:

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

Il vantaggio: un utility a bassa specificità in un layer elevato può sovrascrivere una regola ad alta specificità in un layer basso. Questo significa che non hai più bisogno di `!important` o hack dei selettori per gestire l'ordine di override — organizzi il CSS in layer (reset → framework → components → overrides) e l'ordine è prevedibile.

## :where() — specificità zero

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

`:where()` corrisponde ai suoi argomenti ma aggiunge **nessuna specificità** — perfetto per default/reset che chiunque può facilmente sovrascrivere:

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

## :is() — stesso matching, assume la massima specificità

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

`:is()` accorcia lunghe liste di selettori (come `:where()`) ma **contribuisce** alla specificità (quella del suo argomento più specifico). Quindi usa `:is()` per il grouping quando vuoi il peso normale; `:where()` quando lo vuoi sovrascrivibile.

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