12 boas práticas de CSS moderno para projetos escaláveis

CSS é fácil de começar e difícil de manter em escala. Estas são práticas que ajudam um projeto a crescer sem virar uma pilha de !important.

1. Use custom properties para tokens de design

:root {
  --cor-primaria: #5b53f0;
  --espaco-md: 16px;
}

2. Prefira classes a seletores de elemento genéricos

Estilizar div ou span diretamente cria conflitos difíceis de rastrear. Classes específicas tornam a intenção explícita.

3. Adote uma convenção de nomenclatura e siga até o fim

BEM, utilitários atômicos ou uma convenção própria — o importante é que o time inteiro siga a mesma regra, para que qualquer pessoa consiga prever o nome de uma classe nova.

4. Evite !important como primeira solução

Quase sempre existe uma forma de resolver especificidade reorganizando seletores ou usando @layer, antes de recorrer a !important.

5. Organize a cascata com @layer

@layer reset, base, componentes, utilitarios;

6. Componentize, não centralize tudo em um arquivo gigante

Um arquivo CSS de 5 mil linhas é difícil de revisar. Separar por componente (mesmo que depois seja concatenado no build) facilita a manutenção.

7. Prefira unidades relativas (rem, %) a pixels fixos para tipografia

rem respeita o tamanho de fonte configurado pela pessoa usuária no navegador, o que px fixo ignora.

8. Documente decisões não óbvias com comentários curtos

Um z-index: 9999; /* acima do modal de cookies */ economiza minutos de investigação no futuro.

9. Teste em modo escuro desde o início

Adicionar dark mode depois costuma revelar dezenas de cores "grudadas" no código — defina tudo via variáveis desde o primeiro componente.

10. Automatize a geração de páginas repetitivas

Se você tem dezenas de páginas com a mesma estrutura (como as ferramentas deste site), um script gerador evita divergência entre elas — é assim que este site foi construído.

11. Audite CSS morto periodicamente

Ferramentas de cobertura do próprio navegador (aba Coverage do DevTools) ajudam a identificar seletores que não são mais usados.

12. Meça performance real, não só "parece rápido"

Use métricas como Largest Contentful Paint e Cumulative Layout Shift para validar decisões de CSS, especialmente em animações e fontes web.