¿Qué es @layer?
@layer es una regla de CSS que permite definir
prioridades entre archivos o bloques de estilos
de forma explícita y organizada.
¿Para qué sirve?
- Controlar qué estilo gana: Tú decides qué capa tiene más peso, sin depender del orden de carga ni de la especificidad del selector.
-
Eliminar
!important: Evita tener que usar esa regla "tramposa" para sobrescribir estilos. - Prevenir conflictos: Funciona como un "seguro" para que, si el proyecto crece o entran más personas, los estilos no se rompan accidentalmente.
¿Lo necesitas?
Si tu método actual (orden de carga + selectores específicos) te funciona y no tienes conflictos, no es obligatorio. Es una herramienta útil para escalar, pero no cambia la funcionalidad visual de tu web.
En resumen: Es un organizador de prioridades para CSS a prueba de errores. 🛡️
Ejemplo básico de uso
@layer reset, base, componentes, utilidades;
@layer reset {
* {
margin: 0;
padding: 0;
}
}
@layer base {
body {
font-family: system-ui;
}
}
@layer componentes {
.boton {
background: gold;
}
}
@layer utilidades {
.oculto {
display: none;
}
}
En este ejemplo, si hay conflicto entre estilos, ganará el que
esté en la capa declarada más a la derecha en la lista inicial
(utilidades > componentes >
base > reset).