Como estou escrevendo CSS hoje

O CSS passou por grandes avanços nos últimos anos. Atualmente, é possível utilizar recursos nativos que dispensam o uso de pré-processadores ou soluções complexas para a maioria das necessidades.

Neste artigo, vou mostrar como estou lidando com CSS atualmente: o que uso, o que evito, e como cheguei num fluxo que realmente funciona no dia a dia.

Recursos importantes do CSS atual:

Hoje, o CSS suporta recursos muito poderosos sem precisar de ferramentas externas:

• seletor :has()

• Nesting nativo (sem Sass)

• Container queries

• Suporte decente em todos os navegadores modernos

Exemplo com :has():

.card:has(img) {
  border: 1px solid #ccc;
  padding: 16px;
}

Performance e experiência do usuário

Garantir que o CSS carregue rápido e não prejudique a experiência do usuário é essencial hoje em dia. Para isso, alguns cuidados simples já fazem grande diferença:

1. Arquivos CSS leves

Evite estilos desnecessários, especialmente quando usar frameworks grandes.

Use ferramentas que removem CSS que não é usado (tree-shaking ou purge).

2. Cache eficiente com hash no nome do arquivo

Quando o CSS muda, o arquivo deve ser baixado de novo. Se não mudou, o navegador deve usar o cache. Para isso, use nomes de arquivos com hash, como:

styles.3b4f1a.css

Ferramentas como Webpack, Vite e esbuild geram isso automaticamente.

3. Minificação e compressão

Remover espaços, quebras de linha e comentários diminui o tamanho do CSS. Além disso, configure seu servidor para usar compressão (gzip ou brotli).

Exemplo de minificação via esbuild:

esbuild styles.css --minify --outfile=styles.min.css

4. Evitar layout shift

Carregue as fontes com font-display: swap para que o texto apareça logo, mesmo antes da fonte personalizada carregar.

@font-face {
  font-family: 'MinhaFonte';
  src: url('/fonts/minhafonte.woff2') format('woff2');
  font-display: swap;
}

Além disso, carregue o CSS crítico inline para evitar que o conteúdo "pule" enquanto o CSS externo é baixado.

5. Reduzir requisições

Junte arquivos CSS sempre que possível para diminuir o número de requisições HTTP.

Ferramentas que uso no dia a dia

- Tailwind CSS

Tailwind é um framework utilitário que permite criar interfaces com rapidez, consistência e boa performance. Ele se destaca por:

• Design system embutido: cores, espaçamentos e tipografia seguem uma escala coerente desde o início.

• Classes utilitárias: você aplica estilos diretamente no HTML ou JSX, sem precisar alternar entre arquivos.

• Baixo custo de manutenção: como os estilos ficam no próprio componente, é fácil visualizar e alterar sem quebrar outras partes.

• Performance: no build, apenas as classes utilizadas são incluídas no CSS final.

• Ótima integração com editores: suporte completo a autocompletar, lint, Prettier e plugins no VSCode.

Exemplo:

export function Card() {
  return (
    <div className="rounded-lg bg-white p-6 shadow-md transition hover:shadow-lg">
      <h2 className="mb-2 text-xl font-semibold text-gray-900">Título</h2>
      <p className="text-gray-600">Conteúdo do card com texto mais leve.</p>
    </div>
  )
}

- CSS Modules

Tailwind resolve a maior parte dos estilos do dia a dia, mas nem tudo faz sentido ser feito só com classes utilitárias. Quando os estilos ficam muito específicos, complexos ou precisam de lógica condicional mais elaborada, CSS Modules são uma boa alternativa.

Quando utilizo CSS Modules

• Componentes com animações customizadas, estados visuais complexos ou lógicas condicionais de estilo

• Estilização de elementos que precisam de pseudo-elementos (::before, ::after)

• Casos onde você prefere separar o estilo do markup por legibilidade

• Em conjunto com Tailwind, quando a classe utilitária deixaria o HTML muito poluído

Exemplo em conjunto com Tailwind:

/* Status.module.css */
.dot {
  @apply absolute right-0 top-0 h-3 w-3 rounded-full;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

import styles from './Status.module.css'

export function Avatar({ status }: { status: 'online' | 'offline' }) {
  return (
    <div className="relative h-12 w-12">
      <img src="/avatar.jpg" className="h-full w-full rounded-full" />
      {status === 'online' && <span className={`${styles.dot} bg-green-500`} />}
    </div>
  )
}

Dicas pra quem está evoluindo com CSS

• Não complique. Às vezes o CSS puro já resolve.

• Teste coisas novas, mas só mantenha o que de fato melhora o seu fluxo.

• Misture abordagens se precisar. Tailwind com CSS Modules funciona.

• Use ferramentas que te ajudem, mas não dependa demais delas.