29 de novembro de 2024Atualizado em 25 de outubro de 20269 min de leitura

Como resetar o CSS

Antes de você escrever qualquer linha de CSS, a página já tem estilo. O navegador traz um CSS próprio, chamado de folha de estilo do agente de usuário (user-agent stylesheet), que dá margem ao <body>, deixa o <h1> grande e em negrito, põe recuo nas listas e define a fonte dos botões. É por isso que um HTML sem nenhum CSS já aparece com títulos, parágrafos separados e marcadores nas listas.

Esses estilos ajudam enquanto você não escreveu o seu CSS, mas atrapalham depois: espaços que você não pediu aparecem, e cada navegador aplica valores um pouco diferentes. Resetar o CSS é começar o projeto zerando ou ajustando esses estilos padrão, para que a página fique do jeito que o seu CSS manda.

O exemplo abaixo mostra isso numa página de verdade. Sem reset, repare na margem em volta da página, no espaço entre os blocos coloridos e na imagem, que passa da largura da caixa. Depois clique em “Aplicar CSS Reset” e veja tudo se ajustar:

<body>
  <button id="toggle-reset">Aplicar CSS Reset</button>
  <h1>CSS Reset</h1>
  <p>
    Existem diversos tipos de Reset CSS, cada um com suas particularidades e
    níveis de reset. O pai de todos os resets é o criado por Eric Meyer em
    2007. Mas além dele, existem outras opções populares, tais como:
  </p>
  <ul>
    <li>Normalize.css</li>
    <li>Sanitize.css</li>
    <li>Bootstrap Reboot</li>
    <li>Tailwind CSS Preflight</li>
  </ul>
  <div class="container">
    <img src="https://picsum.photos/id/237/500/200" alt="Exemplo de imagem" />
  </div>
</body>

/* Estilos sem reset */
body {
  font-family: Arial, sans-serif;
}

h1 {
  background-color: #5d5c61; /* Cinza escuro */
}

p {
  background-color: #557a95;
}

ul {
  background-color: #379683; /* Verde */
}

.container {
  border: solid 4px #557a95;
  width: 400px;
  height: 220px;
}

/* CSS Reset mínimo */
.reset * {
  box-sizing: border-box;
}

.reset * {
  margin: 0;
}

.reset img {
  display: block;
  max-width: 100%;
}

const button = document.getElementById("toggle-reset");
const html = document.documentElement;

button.addEventListener("click", function () {
  if (html.classList.contains("reset")) {
    html.classList.remove("reset");
    button.textContent = "Aplicar CSS Reset";
  } else {
    html.classList.add("reset");
    button.textContent = "Remover CSS Reset";
  }
});

Vendo os estilos padrão do navegador

Dá para ver exatamente o que o navegador aplica sozinho. Clique com o botão direito sobre um elemento da página e escolha “Inspecionar”, ou aperte F12 (no Mac, Cmd + Option + I). Na aba Styles (Estilos) das ferramentas de desenvolvedor, as regras aparecem em blocos: primeiro as do seu CSS, e mais abaixo um bloco marcado como “user agent stylesheet”, com as regras do próprio navegador.

Resetar ou normalizar?

Existem dois jeitos de lidar com os estilos padrão, e eles partem de ideias opostas.

Resetar é zerar tudo. O reset mais conhecido é o Reset CSS do Eric Meyer, publicado em 2007 e atualizado pela última vez em 2011. Ele tira margem, recuo, tamanho de fonte e marcadores de praticamente todos os elementos. Depois dele, um <h1> fica igual a um parágrafo, e você define do zero como cada elemento deve aparecer.

Normalizar é manter os estilos padrão que são úteis e corrigir só o que muda de um navegador para outro. É o que faz o Normalize.css: o <h1> continua grande, a lista continua com marcadores, mas todos os navegadores passam a mostrar isso da mesma forma.

Hoje os navegadores são bem mais parecidos entre si do que em 2007, então a maioria dos projetos usa um meio-termo: um reset moderno, pequeno, que corrige só os padrões que costumam atrapalhar, como o cálculo da largura das caixas, as margens e o tamanho das imagens. É esse tipo de reset que este tutorial monta.

Os frameworks de CSS já trazem o seu: o Bootstrap tem o Reboot e o Tailwind tem o Preflight. Existe também o Sanitize.css, parecido com o Normalize.

Quando usar cada um

Um reset moderno, linha por linha

Este reset tem só as regras que resolvem problemas que você encontraria em quase todo projeto. Ele é inspirado no reset de Josh Comeau, que explica cada regra em detalhe.

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

body {
  line-height: 1.5;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

box-sizing: a largura que você escreve é a largura da caixa

Veja este exemplo:

<style>
  .caixa {
    width: 100px;
    padding: 10px;
    border: 1px solid black;
  }
</style>

<div class="caixa">caixa</div>

Qual é a largura total da caixa? Pelo padrão do CSS, não é 100px, e sim 122px: o navegador soma ao width o padding dos dois lados (20px) e a border dos dois lados (2px). Isso complica qualquer layout, porque toda vez que você muda o espaçamento interno, a caixa cresce.

Com box-sizing: border-box, o padding e a border passam a ficar dentro do width. A caixa do exemplo fica com 100px, e o espaço para o conteúdo diminui para caber o resto. O seletor * aplica a regra a todos os elementos, e o *::before e o *::after incluem os pseudo-elementos, que o * sozinho não alcança.

margin: 0: os espaços passam a ser seus

A regra * { margin: 0; } tira a margem padrão de todos os elementos: os 8px do <body>, as margens dos títulos, dos parágrafos e das listas. A partir daí, todo espaço entre os elementos é um espaço que você colocou no seu CSS, e fica mais fácil entender de onde vem cada um.

line-height: texto mais fácil de ler

O espaço padrão entre as linhas de texto é apertado para parágrafos longos. Um line-height de 1.5 (uma vez e meia o tamanho da fonte) deixa a leitura mais confortável. Como o valor não tem unidade, ele se ajusta sozinho ao tamanho da fonte de cada elemento.

Imagens e vídeos: em bloco e sem passar do espaço

Por padrão, imagens, vídeos e SVGs são elementos em linha (inline), como uma palavra no meio do texto. Isso cria um pequeno espaço embaixo da imagem, reservado para as letras que descem abaixo da linha, como o “g” e o “p”. Com display: block, a imagem passa a ocupar uma linha própria e esse espaço some. A largura dela não muda: continua a da imagem.

O max-width: 100% impede que a imagem fique mais larga que o elemento onde ela está. Uma foto de 2000px de largura, num celular, encolhe até caber na tela, em vez de passar da borda como no exemplo do começo deste tutorial.

font: inherit: formulários com a fonte do site

Campos de formulário e botões não herdam a fonte da página: cada navegador usa a fonte e o tamanho dele. Por isso, um botão costuma aparecer com uma letra menor e diferente do resto do site. O font: inherit faz esses elementos usarem a mesma fonte do texto ao redor.

overflow-wrap: palavras longas não estouram o layout

Uma palavra muito comprida, como um endereço de site, não quebra no fim da linha e pode passar da borda da página no celular. O overflow-wrap: break-word permite que o navegador quebre a palavra quando ela não couber.

Como adicionar o reset ao seu projeto

Salve o reset num arquivo reset.css dentro do projeto e carregue esse arquivo no <head>, antes do seu CSS:

<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="style.css" />

O mesmo vale para os resets prontos, como o do Eric Meyer: baixe o arquivo e coloque no projeto. Carregar o arquivo direto do site do autor faz o seu site depender do servidor de outra pessoa, que pode mudar ou sair do ar.

Exemplo do zero

Uma página pequena para ver, na prática, a diferença que o reset faz.

1. Monte a pasta do projeto

reset-teste/
├── foto.jpg
├── index.html
├── reset.css
└── style.css

Use qualquer foto grande, com mais de 1000px de largura, e salve como foto.jpg.

2. Escreva a página

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Testando o reset</title>
    <link rel="stylesheet" href="reset.css" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <main class="cartao">
      <h1>Minha viagem</h1>
      <p>Três dias andando pela cidade, com paradas para fotos e café.</p>
      <img src="foto.jpg" alt="Vista da cidade do alto de um mirante" />
      <ul>
        <li>Dia 1: centro histórico</li>
        <li>Dia 2: museus</li>
      </ul>
      <button>Ver mais fotos</button>
    </main>
  </body>
</html>

3. Escreva o reset e o seu CSS

No reset.css, cole o reset moderno da seção anterior. No style.css, escreva os estilos do site. Como o reset zerou as margens, os espaços entre os elementos vêm todos daqui:

body {
  padding: 1rem;
  font-family: system-ui, sans-serif;
  background: #f3f4f6;
}

.cartao {
  max-width: 30rem;
  margin: 0 auto;
  padding: 1.5rem;
  border: 1px solid #d1d5db;
  border-radius: 0.75rem;
  background: #ffffff;
}

h1 {
  margin-bottom: 0.5rem;
}

p,
img,
ul {
  margin-bottom: 1rem;
}

ul {
  padding-left: 1.25rem;
}

button {
  padding: 0.5rem 1rem;
}

Repare no .cartao: ele tem max-width: 30rem e padding: 1.5rem. Graças ao box-sizing: border-box do reset, o cartão mede exatamente 30rem de largura, com o espaçamento interno incluído.

4. Teste com e sem o reset

Abra o index.html no navegador. Depois, comente a linha do reset no <head>:

<!-- <link rel="stylesheet" href="reset.css" /> -->

Recarregue e compare:

• sem o reset, a foto passa da largura do cartão;
• o botão aparece com uma fonte diferente da do resto da página;
• o cartão fica mais largo que 30rem, porque o padding é somado à largura.

Ao tirar o comentário da linha do reset, as três diferenças somem. Para ver de onde vinha cada uma, inspecione os elementos com o DevTools e procure o bloco “user agent stylesheet”.

Para saber mais

• A Modern CSS Reset, de Josh Comeau, com a explicação de cada regra (em inglês).
• Reset CSS, a página do reset do Eric Meyer (em inglês).
• box-sizing no MDN.