CSS Reset e Atomic CSS

CSS Reset

Diferentes navegadores têm diferentes estilos padrão. O CSS Reset elimina essas diferenças para renderização consistente.

Reset Básico

CSS

/* Reset universal */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Estilos base do body */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  color: #333;
}

/* Reset de links */
a {
  text-decoration: none;
  color: inherit;
}

/* Imagem responsiva */
img {
  max-width: 100%;
  display: block;
}

Normalize.css vs Reset

Abordagem	Prós	Contras
Normalize.css	Preserva padrões úteis, apenas corrige inconsistências	Mais complexo
Reset Total	Começo limpo, controle total	Deve redefinir tudo

Recomendação: Use Normalize.css para maioria dos projetos.

Atomic CSS

Cada classe faz uma coisa — como blocos de montar:

Exemplo

HTML

<style>
.text-center { text-align: center; }
.text-red { color: red; }
.mt-10 { margin-top: 10px; }
.p-20 { padding: 20px; }
.bg-light { background-color: #f5f5f5; }
.border { border: 1px solid #ddd; }
.rounded { border-radius: 4px; }
</style>
<div class="p-20 bg-light border rounded">
  <h3 class="text-center">Título do Card</h3>
  <p class="mt-10">Conteúdo do card</p>
</div>

▶ Experimente

Benefícios

Granular: Cada classe faz uma coisa, combinações flexíveis
Altamente reutilizável: Um .flex funciona em qualquer lugar
CSS menor: Sem declarações de propriedade duplicadas
Mudanças seguras: Modificar uma classe não quebra elementos não relacionados

❓ Perguntas Frequentes

Q Normalize.css ou CSS Reset?

R Recomenda Normalize.css — ele preserva padrões úteis (como tamanho da fonte h1) enquanto apenas corrige inconsistências do navegador. Reset tradicional zera tudo, significando que você deve redefinir cada elemento, aumentando trabalho.

Q `* { box-sizing: border-box }` afeta desempenho?

R Quase não. Sobrecarga de desempenho do seletor universal é negligível em navegadores modernos, e os benefícios de `box-sizing: border-box` superam qualquer perda teórica de desempenho. Use com confiança.

Q Quando devo usar classes atômicas?

R Melhor para projetos grandes ou sistemas de design unificados. Projetos pequenos podem usar classes regulares. Frameworks como Tailwind CSS têm curvas de aprendizado mais altas — nem todo projeto precisa deles.

📖 Resumo

CSS Reset elimina diferenças de estilo padrão do navegador — fundação do projeto
Atomic CSS fornece escrita estilo "bloco de Lego" — cada classe faz uma coisa, combine conforme necessário
Na prática, Reset e classes atômicas geralmente vivem em uma folha de estilo base como ponto de partida de todas as páginas

📝 Exercícios

Crie um arquivo reset.css com: reset universal de margin/padding/box-sizing, fonte/cor base do body, reset de estilo de links, imagens responsivas.
Adicione pelo menos 10 classes atômicas comuns ao reset.css (flex, espaçamento, alinhamento de texto, etc.).
Crie uma página HTML usando apenas classes atômicas do reset.css para um layout simples de card (título, texto, imagem).