Introducción
CSS Layers, o @layer, es una herramienta para controlar el orden de la cascada. Con capas, defines explícitamente qué estilos tienen prioridad, independientemente de la especificidad.
¿Por qué necesitas capas?
En proyectos grandes, la especificidad se vuelve inmanejable. @layer te permite declarar prioridades: framework, diseño, componentes, utilidades. Cada capa tiene un orden fijo.
Cómo definir capas
Usa @layer base, components, utilities; para declarar el orden. Luego envuelve tus estilos: @layer base { ... }. Las capas posteriores tienen prioridad.
Capas anónimas y anidadas
Puedes tener capas sin nombre y capas dentro de capas. Útil para separar estilos de librerías externas de los tuyos.
Uso con frameworks
Importa Tailwind o Bootstrap en una capa base y sobrescribe sin luchar con especificidad. Sin !important, sin selectores complejos.
Conclusión
CSS Layers devuelve el control de la cascada al desarrollador. En Vynta organizamos proyectos complejos con @layer para mantener CSS mantenible.