CSS moderno pode deixar o front-end mais complexo, alerta Smashing Magazine

O texto da Smashing Magazine parte de um cenário conhecido: você troca cinquenta linhas de JavaScript por poucas linhas de CSS, o diff fica quase todo vermelho e o PR passa fácil. O autor, Gabriel, separa simplicidade local (quão pouco código um arquivo precisa) de complexidade de sistema (quantas interações você precisa entender antes de mexer com segurança). O diff só mostra a primeira.

Ele detalha três "colegas de apartamento". O primeiro é o JavaScript: a migração de um ResizeObserver para container queries deixa o observer e a regra .card--wide .card__title em outro arquivo. Quando o breakpoint muda de 480px para 600px e só o @container é atualizado, surge um estado híbrido entre 480px e 600px que ninguém escreveu. A regra é dividir a responsabilidade: CSS cuida de apresentação que segue do tamanho ou da estrutura do DOM, JavaScript cuida de estado da aplicação e trabalho assíncrono. E, ao terminar, apagar observer, classe e todo seletor que a cita.

O segundo é o layout ao redor. Segundo a MDN, container-type: inline-size aplica style e inline-size containment e cria um block formatting context. Na demo do autor, margens que colapsavam passam a somar (a lacuna foi de 24px para 40px), o card ao lado de um float fica 120px mais estreito e três cards em linha flex com cerca de 74px, 96px e 114px caem para 0px. O terceiro é o Cascade: :has(img) p tem especificidade 0-1-2 e vence .comment p (0-1-1), porque o avatar do comentário conta como imagem. O & do nesting herda a maior especificidade da lista, como :is(), e a saída sugerida é :where(). Camadas (@layer) só ajudam se os dois lados do conflito estiverem em camadas, pois estilos em camada perdem para estilos sem camada.

O tema conversa com a cobertura anterior. Em 21 de abril de 2026, o CEVIU noticiou "Complexidade no Frontend Moderno: Essencial ou Acidental?", sobre o excesso de complexidade e a distância entre o código de frameworks e o runtime nativo do navegador. O texto atual cita o ensaio de Igor Roztropiński sobre isso, publicado em abril de 2026, e muda o foco: mesmo a saída nativa, com CSS moderno, pode criar complexidade se não for migrada com cuidado. Em 10 de julho de 2026, o CEVIU publicou "A Virada do Frontend: Complexidade JavaScript Cede Espaço à Simplicidade", sobre o movimento pendular rumo à simplificação. O alerta da Smashing funciona como contrapeso a essa tendência.

Para quem mantém um front-end em produção, a leitura prática é que migrar para CSS nativo é tarefa de auditoria, não só de substituição. Antes de aprovar o PR que remove JavaScript, vale buscar quem mais responde ao mesmo comportamento, testar o componente em todos os layouts reais e conferir seletores com :has() e nesting no DevTools. Menos linhas só são ganho se o comportamento continuar fácil de depurar.