¿Qué son las capas de cascada (@layer) y cómo ayudan a gestionar la especificidad?

Las capas de cascada (@layer) son una característica relativamente nueva y muy potente de CSS que te permite gestionar de forma más explícita el origen y la precedencia de tus reglas de estilo, lo que ayuda enormemente a controlar la temida «guerra de especificidades».

En esencia, @layer te permite definir diferentes «capas» contenedoras para tus reglas CSS. La clave está en que el orden en que se declaran estas capas es más importante que la especificidad de los selectores individuales cuando se comparan reglas de diferentes capas. Una regla en una capa declarada más tarde anulará una regla en una capa declarada antes, incluso si el selector de la capa anterior es técnicamente más específico.

¿Cómo se definen y utilizan?

Puedes declarar el orden de las capas al principio de tu CSS y luego añadir estilos a ellas:

/* 1. Declarar el orden de las capas (la última tiene más precedencia) */
@layer reset, defaults, themes, components, utilities;

/* 2. Añadir estilos a las capas */
@layer reset {
  /* ... tus estilos de reseteo ... */
  button { appearance: none; }
}

@layer components {
  /* Un selector de baja especificidad en una capa posterior */
  button { /* Esto es menos específico que 'button.clase-especial' */
    background-color: blue;
    color: white;
  }
}

@layer defaults {
  /* Un selector más específico en una capa anterior */
  button.clase-especial {
    background-color: red; /* Esta regla será anulada por la de la capa 'components' */
    padding: 10px;
  }
}Lenguaje del código: PHP (php)

En el ejemplo anterior, aunque button.clase-especial es más específico que button, el background-color: blue; de la capa components ganará porque la capa components se definió (o su intención de orden) después de defaults.

¿Cómo ayudan a gestionar la especificidad?

1. Control predecible sobre la cascada: Puedes colocar estilos de terceros (frameworks, bibliotecas) en capas tempranas y luego anularlos fácilmente con tus propios estilos en capas posteriores, usando selectores más simples sin necesidad de aumentar artificialmente su especificidad o recurrir a !important.
2. Mejor organización del CSS: Permite estructurar tu código en secciones lógicas (reset, base, componentes, utilidades, etc.) con un control claro sobre cómo interactúan.
3. Reducción de selectores complejos e !important: Al gestionar la precedencia a nivel de capa, se reduce la necesidad de crear selectores largos y enrevesados o de abusar de !important para forzar estilos.

Es importante notar que los estilos que no están definidos dentro de ninguna capa (unlayered styles) tienen la mayor precedencia sobre cualquier estilo en capa.

Dentro de una misma capa, la especificidad y el orden de las reglas CSS funcionan de la manera tradicional.