What are Container Queries and their performance implications?

CSS Container Queries allow components to adapt based on their container's size rather than the viewport, enabling truly reusable responsive components. Performance implications: Positive: fewer layout JavaScript hacks (ResizeObserver + class manipulation) replaced with native CSS. Native CSS is more performant than JS-driven responsive adjustments. Negative: containers require layout containment (container-type: inline-size), which creates new layout contexts. Each additional containment context adds a small overhead during layout recalculation. For deeply nested components with many containers, this can add up. Size queries: @container card (min-width: 400px) { .card-title { font-size: 2rem; } }. Style queries (experimental): @container style(--layout: grid) { ... } — query computed custom property values. Performance best practices: only apply container-type to elements that actually need size-aware children. Avoid applying it to every element. Use container-type: inline-size (cheaper) over size when you only need width queries. Container Queries replace many patterns that previously required JavaScript ResizeObserver and class toggling — the net performance impact is positive for most use cases.