CSS

Cascade Layers (@layer): ordena la prioridad sin guerra de especificidad

Estructura CSS con @layer para controlar prioridad de forma explícita, reducir conflictos y escalar estilos sin abusar de !important.

¿Cuánto sabes de CSS?

📘 Teoría

Por qué usar capas

Menos conflictos y una arquitectura más escalable.

Sin capas, un bug de estilo suele resolverse subiendo especificidad (selectores largos o !important). Ese enfoque escala mal y complica el mantenimiento.

Con @layer defines una jerarquía explícita desde el principio. Así puedes acordar reglas de prioridad por arquitectura, no por fuerza bruta.

Patrón práctico: reset → framework → base → components → utilities → overrides.

Reglas clave de prioridad

La cascada compara primero capas y luego especificidad dentro de la capa ganadora.
Una clase en una capa superior puede ganar a un ID en una capa inferior.
Evita dejar reglas críticas fuera de capa: pueden romper el contrato de prioridades.
Documenta el propósito de cada capa para que todo el equipo escriba CSS con la misma lógica.

Menos especificidad, más control

@layer base, components, utilities;

@layer base {
  #price { color: #0f172a; }
}

@layer utilities {
  .text-accent { color: #2563eb; }
}

/* Gana .text-accent porque su capa (utilities) tiene más prioridad */

Integrar librerías externas sin perder control

Si importas CSS de terceros, asígnalo a una capa concreta para que no compita de forma caótica con tus estilos.

Esto te permite sobreescribir una librería desde capas superiores sin abusar de selectores complejos.

@import con layer()

@layer reset, framework, app, utilities;

@import url('./normalize.css') layer(reset);
@import url('./framework.css') layer(framework);

@layer app {
  .card { border-radius: 12px; }
}

@layer utilities {
  .u-text-danger { color: #dc2626; }
}

Sintaxis práctica

Primero declara el orden global de capas.
Después escribe reglas dentro de cada @layer.
Mantén una cabecera de capas única en tu CSS global.
No dependas de IDs ni !important para forzar prioridad.

Capas en acción

@layer reset, base, components, utilities, overrides;

@layer base {
  h1 { color: #1e293b; }
}

@layer components {
  .hero-title { color: #334155; }
}

@layer utilities {
  .text-danger { color: #dc2626; }
}

Estrategia recomendada en proyecto real

Define una cabecera de capas única y estable al inicio del CSS global. Esto evita que cada archivo invente su propio orden.

Usa components para estilos de UI y utilities para ajustes atómicos. Si algo debe ganar, cambia la capa, no la especificidad.

En revisiones de código, valida que los cambios respeten el contrato de capas antes de aceptar un !important.

Orden de capas mantenible

@layer reset, framework, base, components, utilities, overrides;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
}

@layer base {
  body { margin: 0; font-family: system-ui; }
}

@layer components {
  .card { border-radius: 12px; border: 1px solid #cbd5e1; }
}

@layer utilities {
  .u-hidden { display: none; }
}

@layer overrides {
  .legacy-card { border-radius: 0; }
}

Reglas fuera de capa

Las reglas no incluidas en ninguna capa tienen prioridad sobre estilos en capas normales. Úsalas con criterio para overrides puntuales.

En equipos grandes conviene documentar cuándo un estilo debe quedar fuera de capa para evitar sorpresas.

Si necesitas deshacer el valor definido por una capa concreta, puedes apoyarte en revert-layer en casos avanzados.

revert-layer para volver al valor previo de capa

@layer base, components;

@layer base {
  .btn { color: #0f172a; }
}

@layer components {
  .btn-danger { color: #dc2626; }
  .btn-neutral { color: revert-layer; }
}