Snippets de código CSS moderno: não escreva mais CSS como se fosse 2015

• Coletânea de códigos que mostra lado a lado técnicas antigas de hack em CSS e a sintaxe nativa moderna de CSS que as substitui
• Usa padrões modernos como Grid, Flexbox, cores OKLCH, container query e scroll-timeline para reduzir a dependência de JavaScript
• Organizado por temas como cores, layout, animação, seletores, tipografia e fluxo de trabalho, apresentando alternativas modernas para cada recurso
• Com os padrões mais recentes de CSS, é possível reduzir a dependência de JS, Sass e bibliotecas externas e aproveitar ao máximo os recursos nativos do navegador

[GN⁺]

Comentários do Hacker News

• CSS em 2025 parece meio que voltar a escrever estilos inline como em 2005 direto no HTML
  Estou falando de Tailwind, mas no fim isso ignora a separação entre formatação e apresentação

  • O mito mais antigo do desenvolvimento web é a ideia de “separação de interesses”
  • HTML e CSS são apenas uma separação de tecnologias
    Se HTML realmente cuidasse só do conteúdo e CSS só do estilo, não haveria necessidade de criar uma sopa de divs como .container-wrapper .container .container-inner
    O fato de precisarmos editar o HTML sempre que mudamos o layout é a prova disso
  • Não precisa ofuscar o código, é só usar Tailwind
  • Acho até melhor assim
    O código relacionado ao componente fica todo em um lugar só, sem precisar ficar pulando entre arquivos
  • Acho uma boa ideia
    Layout e estilo são partes inseparáveis da UI
    HTML não é conteúdo, é layout
    Mesmo que você acredite em separação de interesses, HTML e CSS pertencem à mesma camada de apresentação
    Acreditar que dá para separar os dois é ignorar a realidade

• Fiz uma lista das principais melhorias recentes do CSS

  1. Seletores aninhados (nested selectors)
  2. :has(...)
  3. :is(...) — antigamente era preciso usar gambiarra tipo :not(:not(...))
  4. :where(...) — parecido com :is(...), mas com peso de seletor igual a 0, então é útil em seletores complexos
  • Concordo fortemente com o item #1
    A maioria dos LLMs não conhece esse recurso
    Recomendo adicionar exemplos em AGENTS.md
    Vale consultar a documentação do MDN sobre Nesting Selector
    Dá para usar o seletor & para ganhar legibilidade e redução de duplicação ao mesmo tempo
  • O meu favorito é text-box: trim
    Depois de 20 anos explicando para designers que alinhar o topo de letras maiúsculas era impossível, é libertador ver isso acabar
  • Pessoalmente, o recurso de que mais gosto é @layer
  • Os itens 2 a 4 são bons, mas não dá para usar grep em seletores aninhados, então não gosto

• Alguns exemplos ainda funcionam em todos os navegadores do jeito antigo, mas o jeito novo só funciona em Chrome/Edge
  Acho irresponsável incluir esse tipo de exemplo porque isso reforça o monopólio do Blink

  • Concordo. Seria bom se o filtro padrão fosse “newly available”, incluindo os três principais navegadores (Chrome/Edge, Safari e Firefox)
  • A culpa não é do site
    O certo seria apontar a falta de conformidade com padrões da Mozilla

• Precisamos parar de fixar elementos nas bordas da tela
  Em alguns sites, mais da metade da tela é ocupada por elementos estáticos
  O natural é deixar o conteúdo rolar

• Ironicamente, esse site está preso em modo escuro e não usa prefers-color-scheme

• Às vezes você pensa “que exemplo criativo de CSS!”, mas aí vê que o suporte no navegador está na faixa de 40~50%, o que traz limitações reais

  • Antigamente essa falta de suporte era um problemão, mas hoje melhorou bastante
    Em parte por causa da influência excessiva do Chromium, mas no fim o saldo é positivo
    Veja Interop 2025
  • Se você trocar o filtro de exemplos para “widely available”, a taxa de suporte sobe bastante
  • É só uma questão de tempo
    Os vendors de navegadores estão adicionando recursos com antecedência para chegar a um suporte amplo no futuro

• Fiquei confuso porque alguns exemplos marcados como não funcionando no Firefox funcionam normalmente nas demos
  Fico me perguntando se aplicaram algum polyfill

  • O rótulo é “Limited availability”
    A porcentagem verde no canto inferior esquerdo representa a fatia de usuários de navegadores que suportam o recurso
    Muitas vezes fica abaixo de 50%
    No fim, isso está mais para “CSS do Chrome mais recente” do que para “CSS moderno”
  • A rotulagem de suporte de recursos está uma bagunça
    Por exemplo, sibling-index() ainda não funciona no Firefox, mas aparece como “widely available”

• Hoje em dia fico em dúvida entre Tailwind, CSS-in-JS, Sass/SCSS e Vanilla CSS

  • Não existe resposta certa
    Use o que fizer sentido para o time
    Se Tailwind combina com vocês, vá de Tailwind; se for projeto pessoal, use CSS inline; se você já está acostumado com Sass, continue com ele;
    e se quiser apostar tudo no CSS moderno, também é uma ótima escolha

• Trabalho com desenvolvimento web há tanto tempo que até os exemplos chamados de “jeito antigo” têm muitos recursos que eu estou vendo pela primeira vez

• Foi a primeira vez que vi um recurso de ajuste de luminosidade de cor
  Antes eu fazia isso com Sass e Compass, mas manter essa toolchain era trabalhoso
  Agora que o próprio CSS suporta isso, ficou bem mais prático