CSS
Organiza estilos por capas de cascada para controlar prioridades entre reset, librerías, componentes, utilidades y overrides sin aumentar especificidad.
permite definir el orden de prioridad entre grupos de estilos antes de comparar especificidad.
@layer@layer reset, base, components, utilities;@layer reset, vendor, base, components, utilities;Esta sentencia fija el orden aunque el contenido se cargue en archivos distintos.
@layer base {
body {
font-family: system-ui, sans-serif;
}
}
@layer components {
.button {
padding: 0.75rem 1rem;
}
}@import url("vendor.css") layer(vendor);Una librería completa queda por debajo de las layers de la aplicación sin reescribir sus selectores.
Las declaraciones normales no layerizadas tienen prioridad sobre todas las declaraciones normales dentro de layers del mismo origen.
Por eso conviene decidir una política: utilizar layers de forma coherente o reservar estilos sin layer para overrides deliberados.
@layer guardrails, components;Para declaraciones !important, las primeras layers tienen mayor prioridad. Esto permite colocar protecciones importantes al inicio.
@layer components {
.button { color: blue; }
#checkout .button { color: purple; }
}Dentro de la misma layer, la cascada continúa con specificity y source order.
@layer components {
@layer defaults, variants;
@layer defaults { ... }
@layer variants { ... }
}También pueden nombrarse como components.defaults.
@layer {
.temporary { ... }
}Participan en el orden, pero no pueden reabrirse por nombre. Útiles para encapsular imports o bloques que no deben extenderse.
reset → normalización mínima
vendor → librerías externas
base → elementos y tokens globales
components → piezas reutilizables
utilities → ajustes pequeños y explícitosNo existe una lista universal; el orden debe reflejar cómo quieres resolver conflictos.
No aíslan nombres, no impiden que un selector coincida fuera del componente y no sustituyen CSS Modules o Shadow DOM.
Solo organizan prioridad en la cascada.
@layer reset, base, components, utilities;
@layer components {
:where(.button) {
display: inline-flex;
gap: 0.5rem;
}
}
@layer utilities {
.sr-only { ... }
}¿Por qué una clase en utilities puede ganar a un ID en components?
Porque la prioridad de layer se resuelve antes de la especificidad.
Nesting y @scope organiza relaciones locales sin inflar selectores.