Que recursos modernos de CSS realmente mudaram como você constrói componentes, e que problema as container queries resolvem?

Container queries deixam um componente responder à largura do seu container em vez da viewport, então o mesmo card pode ser estreito numa sidebar e largo numa coluna principal sem passar props nem adivinhar breakpoints. Junto delas, o seletor has permite estilizar o pai, o aninhamento nativo remove a dependência de pré processador, subgrid alinha conteúdo aninhado ao longo de um grid, e as view transitions animam entre estados sem biblioteca.

A grande é container queries, porque por anos o layout de um componente ficava amarrado à viewport mesmo sem o componente ter ideia da largura do espaço que ocupa. Então o mesmo card tinha uma prop tipo variant compact, e essa prop precisava ser passada desde onde ele fosse colocado. Agora declaro container type inline size no wrapper e o card se estiliza pela própria largura, o que significa que ele cai numa sidebar ou num grid de largura total e simplesmente funciona. Depois disso, o seletor has, principalmente para estados de formulário, porque consigo estilizar o wrapper de um campo com base em ele conter ou não um input inválido sem tocar em JavaScript. O aninhamento nativo removeu uma dependência real de pré processador para mim, e subgrid finalmente faz os cabeçalhos de card se alinharem ao longo de uma linha. Sobre suporte, eu checo o status de baseline em vez de adivinhar, e se um recurso não está amplamente disponível eu uso como melhoria progressiva com um bloco supports para nada parecer quebrado sem ele.