@layer da control explícito sobre el orden de la cascada, independientemente de la especificidad o el orden de las fuentes.

El problema de la cascada antes de @layer

Antes, la gestión de la cascada se basaba en convenciones (BEM, SMACSS, ITCSS) que no eran aplicadas por el navegador.

Cómo funciona @layer

Agrupa estilos en capas con nombre y define su precedencia. Las capas posteriores sobrescriben a las anteriores, sin importar la especificidad.

@layer reset, base, components, utilities;

Estrategias de arquitectura

Modelo de cuatro capas: reset, base, components, utilities. Para frameworks como Tailwind, envuélvelos en una capa de baja prioridad.

Control de especificidad dentro de capas

Dentro de una capa, las reglas normales de especificidad siguen vigentes. !important invierte la precedencia entre capas.

Migración desde BEM/SMACSS

Migra incrementalmente: envuelve reset y base en capas, luego mueve components y utilities. Usa PostCSS plugin postcss-layer para automatizar.

Soporte superior al 95% globalmente (Chrome 99+, Firefox 97+, Safari 15.4+).