What modern CSS features have actually changed how you build components, and what problem do container queries solve?

Container queries let a component respond to the width of its container instead of the viewport, so the same card can be narrow in a sidebar and wide in a main column without prop plumbing or breakpoint guesswork. Alongside them, the has selector enables parent styling, native nesting removes a preprocessor dependency, subgrid aligns nested content across a grid, and view transitions animate between states without a library.

The big one is container queries, because for years a component's layout was tied to the viewport even though the component has no idea how wide its slot is. So the same card had a prop like variant compact, and that prop had to be threaded from wherever it was placed. Now I declare container type inline size on the wrapper and the card styles itself from its own width, which means it drops into a sidebar or a full width grid and just works. After that, the has selector, mostly for form states, because I can style a field wrapper based on whether it contains an invalid input without touching JavaScript. Native nesting has removed a real preprocessor dependency for me, and subgrid finally makes card headers line up across a row. On support, I check the baseline status rather than guessing, and if a feature is not widely available I use it as progressive enhancement with a supports block so nothing looks broken without it.