2024 foi um ano espetacular para quem trabalha com CSS. Tivemos avanços significativos, funcionalidades aguardadas há anos finalmente ganhando suporte e, principalmente, a consolidação de um novo jeito de escrever CSS: mais poderoso, mais expressivo e cada vez menos dependente de JavaScript.
Neste artigo, inspirado no vídeo do canal, veja uma análise estilo Tier List, classificando as principais features de CSS que se destacaram em 2024 — seja por inovação, impacto real no dia a dia ou pelo simples fato de já estarem prontas para uso em produção.
Como funciona essa Tier List de melhores features CSS?
A ideia é simples: classificar cada feature nas categorias:
- S (Superior): transformadoras, game changers.
- A (Alta): excelentes, já estão mudando nossa forma de trabalhar.
- B (Boa): úteis e promissoras, mas com uso mais pontual.
- C (Curiosa): legais, mas ainda com impacto restrito.
- D (Dispensável): spoiler: não houve nenhuma que entrasse aqui este ano! 🎉
Features CSS Tier S — As que mudaram o jogo
:has() – O “seletor pai” finalmente chegou!
Depois de anos de espera, finalmente temos o seletor CSS :has(), capaz de aplicar estilos em um elemento com base em seus descendentes. Exemplo clássico:
|
1 2 3 |
form:has(input:invalid) { border: 2px solid red; } |
É simples, poderoso e abre possibilidades que antes exigiam JavaScript.
Por que está no Tier S de features CSS: muda a lógica de como pensamos seletores CSS. Agora, realmente é possível fazer coisas que, até então, eram impossível com CSS puro.
Veja mais sobre :has() neste vídeo no canal:
Scroll-Driven Animations – Animações baseadas no scroll com CSS puro
Uma das features mais surpreendentes: podemos controlar animações com base na posição de scroll do elemento, sem escrever uma linha de JavaScript.
|
1 2 3 4 5 6 7 8 9 |
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .c-element { animation-timeline: scroll(); animation-name: fade-in; } |
Por que está no Tier S de features CSS: eleva a experiência visual sem custo de performance.
Algum dia você imaginou conseguir fazer animações baseadas em scroll com CSS puro?!
Também temos vídeo sobre animações de scroll com CSS puro (Scroll-driven Animations):
Cascade Layers (@layer) – Controle absoluto da Cascata CSS
Agora é possível organizar o CSS em camadas com @layer, atribuindo uma ordem explícita entre elas. Isso ajuda a evitar conflitos e aumenta o controle sobre o que é sobrescrito.
|
1 2 3 4 5 |
@layer reset, components, overrides; @layer reset { * { margin: 0; padding: 0; } } |
Por que está no Tier S de features CSS: revoluciona a organização do CSS em projetos de qualquer porte. Realmente, é uma nova maneira poderosa de lidar com CSS para ter controle máximo e evitar conflitos.
E claro que a gente tem um vídeo mostrando tudo Sobre CSS Layers (CSS Cascade Layers):
Container Queries – O verdadeiro web design responsivo
Esqueça media queries baseadas na viewport! Agora, é possível aplicar estilos com base no tamanho do contêiner-pai usando @container, tornando o design muito mais adaptável e componentizado de maneira nativa com CSS.
|
1 2 3 4 5 |
@container (min-width: 468px) { .c-card { display: flex; } } |
Por que está no Tier S de features CSS: permite um CSS mais modular, escalável e focado em componentes. Esse é o verdadeiro web design responsivo, até então, só não possível devido a limitações técnicas (que Container Queries resolvem com maestria).
Features CSS Tier A — Tornam CSS ainda mais incrível
CSS Subgrid – Controle refinado em layouts complexos
Com subgrid, um elemento pode herdar a definição de grid de seu ancestral, permitindo alinhamentos perfeitos entre colunas/linhas.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.l-grid-container { display: grid; gap: 1rem; grid-template-columns: 1fr 2fr; } .c-article { display: grid; grid-template-columns: subgrid; /* herda do pai */ grid-template-rows: auto auto; row-gap: 0.5rem; } |
Neste exemplo de código, cada .c-article herda as mesmas colunas de .l-grid-container, mantendo os mesmo alinhamentos sem precisar repetir a definição.
Por que está no Tier A de features CSS: ainda pouco adotado, mas com imenso potencial para layouts complexos. Era uma feature muito esperada pelos devs CSS que, agora, está disponível para amplo uso.
CSS Nesting – CSS nativo com hierarquia
Agora é possível escrever seletores aninhados (nesting) de maneira nativa com CSS:
|
1 2 3 4 5 6 7 |
.card { padding: 1rem; &:hover { background: #f0f0f0; } } |
Por que está no Tier A de features CSS: melhora a legibilidade e organização do código.
Mas, se você está acostumado a aninhamento em pré-processadores, existem algumas diferenças importantes que você deve saber. Assista ao nosso vídeo para entender melhor:
@scope – CSS com escopo controlado
CSS @scope permite limitar regras CSS a um determinado escopo, evitando “vazamentos” indesejados de estilo — na prática, tornando o código mais controlado e componentizado, evitando acidentes e comportamentos inesperados de CSS.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<style> @scope (.c-card) { h2 { color: darkblue; } p { font-size: 1rem; } } </style> <div class="c-card"> <h2>Dentro do card</h2> <p>Este parágrafo será afetado.</p> </div> <div> <h2>Fora do escopo</h2> <p>Este parágrafo não será afetado.</p> </div> |
Neste exemplo, os estilos definidos dentro de @scope só se aplicam aos elementos dentro de .c-card, evitando que regras “vazem para fora”.
Por que está no Tier A de features CSS: mais controle e previsibilidade em bases de código CSS de qualquer tamanho; mais um poderoso adendo ao controle dos estilos e prevenção de conflitos CSS.
Features CSS Tier B — Recursos úteis com impacto mais pontual
@property – CSS Custom Properties tipadas
Com @property, é possível declarar variáveis CSS com tipo, valor inicial e animabilidade.
Fazendo uma comparação livre (e respeitando as limitações óbvias), é possível dizer que @property é para CSS o que TypeScript é para JavaScript.
Exemplo:
|
1 2 3 4 5 |
@property --rotation { syntax: '<angle>'; initial-value: 0deg; inherits: false; } |
Por que está no Tier B de features CSS: alguns podem considerar avançado para a maioria dos casos, mas muito promissor para animações e theming.
light-dark() – Cores temáticas unificadas
Possibilita definir cores para light/dark mode em uma única linha:
|
1 |
color: light-dark(#000, #fff); |
Por que está no Tier B de features CSS: reduz código e melhora a experiência ao trabalhar com temas.
Para saber mais sobre light-dark(), assista ao nosso vídeo específico sobre essa novidade:
Tier C — Interessantes, mas de resultados não tão impactantes
text-wrap: balance
Agora, com a adição de text-wrap: balance em CSS, é possível equilibrar automaticamente a quebra de linhas em títulos e parágrafos, deixando o texto visualmente mais harmônico.
|
1 2 3 4 |
h1 { max-width: 30ch; text-wrap: balance; } |
Neste exemplo, o título será quebrado em múltiplas linhas de maneira visualmente balanceada, evitando linhas com só uma palavra ou quebra abrupta.
Por que está no Tier C de features CSS: é útil, mas com aplicabilidade bem pontual.
Conclusão: CSS nunca foi tão poderoso!
Se você acha que CSS ainda é só “estilinho básico”, está na hora de repensar. Com :has(), container queries, scroll-driven animations, cascade layers e tantas outras novidades, o CSS virou uma linguagem poderosa de lógica visual e controle preciso da interface.
A melhor parte? Tudo isso sem sair do CSS puro. Nada de hacks. Nada de JS.
Essas novidades mostram que o CSS está mais moderno, poderoso e flexível do que nunca!
Se em anos anteriores dependíamos de pré-processadores ou JavaScript para resolver certos desafios, agora temos cada vez mais ferramentas nativas para lidar com layouts, temas, animações e escopo de estilos com elegância.
A Tier List das últimas melhores features de CSS é um reflexo direto da maturidade que a linguagem alcançou — e, sem dúvida, um convite para todo dev frontend explorar ao máximo esse novo universo de possibilidades.
E aí, qual foi a feature de CSS mais recente que você mais gostou?