Qu'est-ce que les cascade layers (@layer) et les sélecteurs :is/:where ?

Question

Accepted Answer

Ces fonctionnalités vous donnent un contrôle explicite sur la **cascade** et la **spécificité** — s'attaquant directement au problème de la guerre des spécificités dans les grandes bases de code.

## Pourquoi c'est important

`@layer` vous permet de définir des couches nommées dont vous contrôlez l'ordre. Les styles dans une couche ultérieure battent les couches antérieures **indépendamment de la spécificité** :

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

La puissance : une utility faible-spécificité dans une couche haute peut surcharger une règle haute-spécificité dans une couche basse. Cela signifie que vous n'avez plus besoin de `!important` ou de hacks de sélecteurs pour gérer l'ordre de surcharge — vous organisez CSS en couches (reset → framework → components → overrides) et l'ordre est prédictible.

## :where() — zéro spécificité

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

`:where()` correspond à ses arguments mais ajoute **aucune spécificité** — parfait pour les defaults/resets que n'importe qui peut facilement surcharger :

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

## :is() — même matching, prend la spécificité la plus haute

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

`:is()` raccourcit les longues listes de sélecteurs (comme `:where()`) mais **contribue** à la spécificité (celle de son argument le plus spécifique). Donc `:is()` pour grouper quand vous voulez un poids normal ; `:where()` quand vous le voulez surchargeant.

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

Ensemble, ces fonctionnalités résolvent le problème de maintenance le plus difficile de CSS — **la spécificité incontrôlée**. `@layer` rend l'ordre de surcharge explicite et intentionnel (plus d'escalade `!important`), `:where()` écrit des resets/defaults qui ne vous combattent jamais, et `:is()` garde les sélecteurs complexes DRY.

Ce sont des outils fondamentaux pour une architecture CSS scalable et framework-friendly.