Design system com centenas de regras ganha guerra de especificidade e o time joga !important por cima. Componente que roda na sidebar e no conteúdo principal precisa de media query que não conhece a largura do container. Cascade layers e container queries resolvem os dois problemas com suporte de navegador consolidado, segundo os dados da MDN Web Docs (2025).

Cascade layers na prática

@layer declara ordem entre folhas: base, components, utilities. A primeira menção no CSS principal fixa a ordem das folhas; regra em utilities vence regra em components por posição na lista, não por especificidade. Estilo sem layer vence qualquer layer, então a migração começa marcando as folhas existentes e deixa o !important perder força aos poucos. Design system mantém base e components; produto estende em utilities sem brigar com seletor.

Container queries: o componente mede seu container

container-type: inline-size num wrapper habilita @container. O card de produto pergunta a largura do container, não da janela, e troca de layout empilhado para grid assim que passa de 480 px. O mesmo componente funciona na sidebar estreita e no conteúdo largo, sem classe modificadora por contexto. Media query continua no lugar dela: container query cuida do componente, media query cuida da página, do dark mode e da impressão.

O que isso muda na arquitetura do CSS

Camada utilities no fim da lista encerra o padrão utility-first sem sobrescrever componente por ordem de import. Tokens de cor e espaço ficam em base como custom properties; componente só consuma. Rachel Andrew, no blog do Chrome Developers (2022), publicou padrões de container query para cards e sidebars antes da feature virar baseline; a arquitetura recomendada não mudou desde então.

Migração sem reescrita

Você marca as folhas com @layer sem alterar regra nenhuma. Roda teste visual com Playwright ou Chromatic nos screens críticos. Componentes novos nascem com container query desde o primeiro PR. Regra antiga com media query da viewport só sai quando o teste visual confirma equivalência. Duas features na mesma sprint enganam o review; camadas primeiro, container queries no componente seguinte.