A design system with hundreds of rules loses a specificity war and the team throws !important on top. A component that runs in the sidebar and in the main content needs a media query that knows nothing about the container width. Cascade layers and container queries solve both problems with consolidated browser support, according to MDN Web Docs data (2025).

Cascade layers in practice

@layer declares order across stylesheets: base, components, utilities. The first mention in the main CSS fixes the order of the stylesheets; a rule in utilities beats a rule in components by list position, not by specificity. Unlayered style beats any layer, so migration starts by marking existing stylesheets and letting !important lose force over time. The design system owns base and components; product teams extend in utilities without fighting selectors.

Container queries: the component measures its container

container-type: inline-size on a wrapper enables @container. The product card asks the container width, not the window, and switches from stacked layout to grid once it passes 480 px. The same component works in the narrow sidebar and the wide content, with no modifier class per context. The media query keeps its job: container queries own the component, media queries own the page, dark mode, and print.

What this changes in CSS architecture

A utilities layer at the end of the list closes the utility-first pattern without overwriting components by import order. Color and spacing tokens live in base as custom properties; components consume them. Rachel Andrew, on the Chrome Developers blog (2022), published container query patterns for cards and sidebars before the feature hit baseline; the recommended architecture has not changed since.

Migration without a rewrite

You mark stylesheets with @layer and change no rule. You run visual tests with Playwright or Chromatic on critical screens. New components ship with container queries from the first PR. Old rules with viewport media queries leave once visual tests confirm equivalence. Two features in the same sprint fool the review; layers first, container queries on the next component.