¿Qué son los cascade layers (@layer) y los selectores :is/:where?

Question

Accepted Answer

Estas características te dan control explícito sobre la **cascada** y la **especificidad** — atacando directamente el problema de la guerra de especificidad en bases de código grandes.

## @layer — ordenamiento explícito de cascada

`@layer` te permite definir capas nombradas cuyo orden *tú* controlas. Los estilos en una capa posterior vencen capas anteriores **sin importar la especificidad**:

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

El poder: una utilidad de baja especificidad en una capa alta puede anular una regla de alta especificidad en una capa baja. Esto significa que ya no necesitas `!important` o hacks de selector para gestionar el orden de anulación — organizas CSS en capas (reset → framework → components → overrides) y el orden es predecible.

## :where() — especificidad cero

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

`:where()` coincide con sus argumentos pero añade **ninguna especificidad** — perfecto para defaults/resets que cualquiera puede anular fácilmente:

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

## :is() — mismo matching, toma la especificidad más alta

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

`:is()` acorta largas listas de selectores (como `:where()`) pero **sí** contribuye a la especificidad (la de su argumento más específico). Así que `:is()` para agrupar cuando quieres peso normal; `:where()` cuando lo quieres anulable.

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

## Por qué es importante

Juntos resuelven el problema de mantenimiento más difícil de CSS — **especificidad incontrolada**. `@layer` hace el orden de anulación explícito e intencional (sin más escalada de `!important`), `:where()` escribe resets/defaults que nunca te pelean, e `:is()` mantiene selectores complejos DRY.

Son herramientas fundamentales para arquitectura CSS escalable y amigable con frameworks.