CSS Container Queries in Production — A Year In

Container queries shipped in all major browsers in late 2022. After a year of using them across a 200+ component design system in production, the verdict is strongly positive — with a few caveats.

The Core Win

The ability to style a component based on its container’s size rather than the viewport unlocks true compositional responsiveness. A card that adapts whether it is in a two-column grid or a single-column sidebar, without the parent needing to know the card’s internals, is the composability that CSS has lacked for years.

The Naming Overhead

Every container needs a container-name for named queries. This adds a thin layer of coordination overhead when building a shared library — you need conventions for naming so that consuming teams can write queries against named containers without coupling to internal implementation details.

What is Still Missing

Size queries are well-supported; style queries are still behind flags in most browsers. When style queries land fully, conditional styling based on custom property values will make theming significantly more powerful.