Un design system con cientos de reglas pierde una guerra de especificidad y el equipo lanza !important encima. Un componente que corre en la sidebar y en el contenido principal necesita un media query que no conoce el ancho del contenedor. Las cascade layers y las container queries resuelven ambos problemas con soporte de navegador consolidado, según los datos de MDN Web Docs (2025).

Cascade layers en la práctica

@layer declara el orden entre hojas: base, components, utilities. La primera mención en el CSS principal fija el orden de las hojas; una regla en utilities vence a una regla en components por posición en la lista, no por especificidad. El estilo sin layer vence a cualquier layer, así que la migración empieza marcando las hojas existentes y dejando que el !important pierda fuerza poco a poco. El design system mantiene base y components; producto extiende en utilities sin pelear con selectores.

Container queries: el componente mide su contenedor

container-type: inline-size en un wrapper habilita @container. La card de producto pregunta el ancho del contenedor, no el de la ventana, y cambia de layout apilado a grid al superar los 480 px. El mismo componente funciona en la sidebar angosta y en el contenido ancho, sin clase modificadora por contexto. El media query conserva su trabajo: las container queries cuidan el componente, los media queries cuidan la página, el dark mode y la impresión.

Lo que esto cambia en la arquitectura del CSS

Una capa utilities al final de la lista cierra el patrón utility-first sin sobrescribir componentes por orden de import. Los tokens de color y espacio viven en base como custom properties; el componente solo los consume. Rachel Andrew, en el blog de Chrome Developers (2022), publicó patrones de container query para cards y sidebars antes de que la feature llegara a baseline; la arquitectura recomendada no cambió desde entonces.

Migración sin reescritura

Marcas las hojas con @layer y no cambias ninguna regla. Corres pruebas visuales con Playwright o Chromatic en las pantallas críticas. Los componentes nuevos nacen con container query desde el primer PR. Las reglas viejas con media query de viewport se van cuando la prueba visual confirma equivalencia. Dos features en el mismo sprint engañan al review; capas primero, container queries en el componente siguiente.