CSS reset moderno, comentado, com gerador de regras | We.Inc
Um CSS reset moderno e curto com cada regra explicada. Ative ou desative regras, envolva o resultado em uma cascade layer e copie. Inclui a comparação entre reset e normalize.css.
Um CSS reset moderno é uma dúzia de regras curtas colocadas antes dos seus próprios estilos: dimensionamento border-box em todo elemento, margens padrão zeradas, uma altura de linha legível, imagens em bloco limitadas à largura do container e controles de formulário que herdam a sua fonte. Escolha as regras que quiser abaixo e copie o resultado.
O que as regras principais corrigem
Regra
Padrão do navegador que ela substitui
Por que mudar
box-sizing: border-box
A largura passa a incluir padding e borda
margin: 0
Margens no body, nos títulos, em p e nas listas
O espaçamento vem só do seu próprio CSS
line-height: 1.5 on body
normal (cerca de 1.2)
Leitura mais fácil nos parágrafos
img { display: block; max-width: 100% }
Inline, largura natural
Sem espaço embaixo das imagens, sem transbordar
font: inherit on inputs and buttons
Fonte do sistema em tamanho pequeno
Os formulários combinam com o resto da página
Copiar um reset que você não entende significa depurar regras que você nunca escolheu. Esta página explica cada linha em palavras simples e deixa você montar a sua própria versão com chaves, para que o arquivo que você cola seja curto e cada linha esteja ali por um motivo.
Leia a nota ao lado de cada regra e depois ative ou desative.
Escolha se quer envolver o resultado em @layer reset para que qualquer regra sua ganhe dele sem briga.
Copie o CSS gerado e carregue antes das suas outras folhas de estilo.
Coloque o reset em uma cascade layer. Estilos fora de qualquer layer vencem os que estão em layers, não importa a especificidade.
Não zere o list-style de todo ul. A documentação do Tailwind avisa que o VoiceOver pode não anunciar listas sem estilo como listas, então adicione role="list" a qualquer lista que você limpar.
Não mexa no contorno de foco em um reset. Mude o estilo dele em cada componente em vez de removê-lo globalmente.
Se você usa Tailwind, já tem um reset chamado Preflight, então um segundo geralmente só adiciona ruído.
Perguntas frequentes
Qual é a diferença entre um CSS reset e o normalize.css?
Um reset remove os padrões do navegador para você começar de uma página quase em branco. O normalize.css mantém os padrões úteis e só corrige os pontos em que os navegadores discordam. Muitos resets atuais ficam no meio: mantêm os títulos em negrito e as listas intactas, mas tiram as margens e corrigem o dimensionamento.
Ainda preciso de um CSS reset em 2026?
Os navegadores concordam muito mais do que antes, então os resets gigantes antigos são desnecessários. Um curto ainda vale a pena, porque padrões como dimensionamento content-box, margem no body e imagens inline raramente são o que um layout quer.
Por que usar :where() em um reset?
:where() tem especificidade zero, então qualquer seletor posterior, até um simples seletor de elemento, sobrescreve o reset. Isso impede que as regras do reset ganhem silenciosamente dos estilos dos componentes.
Onde coloco o reset?
Carregue-o primeiro, antes de qualquer outra folha de estilo, ou importe-o dentro de @layer reset no topo do seu arquivo CSS principal e declare a ordem das layers uma vez com @layer reset, base, components.
Por que o box-sizing vem primeiro
Com o content-box padrão, um card de 300px de largura com 20px de padding acaba com 340px de largura. O border-box incorpora o padding e a borda na largura que você escreveu, que é como a maioria das pessoas espera que o dimensionamento funcione.
Aplicá-lo também aos pseudo-elementos ::before e ::after mantém as formas decorativas coerentes com as caixas que elas decoram.
Regras de texto que envelhecem bem
text-wrap: balance equilibra o comprimento das linhas de títulos curtos, e text-wrap: pretty evita uma palavra sozinha na última linha de um parágrafo. Navegadores que não conhecem esses valores simplesmente os ignoram, então é seguro incluí-los.
overflow-wrap: break-word permite que uma URL longa ou um trecho de código quebre em vez de empurrar a página para o lado no celular.
O que um reset não deve fazer
Um reset não é um design system. Cores, famílias de fonte e escalas de espaçamento pertencem à sua própria camada base, onde podem ser alteradas sem tocar no reset.
Evite regras que prejudicam a acessibilidade, como outline: none em tudo ou remover toda animação para todos os visitantes. Configurações de movimento pertencem a uma query prefers-reduced-motion.
Reset, normalize ou nada
Três formas de lidar com os padrões do navegador
Abordagem
O que faz
Bom para
Reset radical clássico
Remove quase todos os padrões, inclusive os tamanhos dos títulos
Raramente necessário hoje
Mantém os padrões e corrige diferenças entre navegadores
Sites de conteúdo que gostam da tipografia padrão
Reset moderno curto
Corrige só dimensionamento, margens, mídia e formulários
A maioria dos sites e aplicações novos
Reset do framework (Tailwind Preflight)
Vem junto com o framework
Projetos que já usam esse framework
Antes e depois
Um card com e sem border-box
As duas caixas dizem width: 200px. Só a segunda mantém essa largura depois que o padding e a borda são adicionados.
Dimensionamento border-box
Largura e altura incluem padding e borda.
Remover margens padrão
O espaçamento vem só das suas próprias regras.
Texto do body legível
Uma altura de linha maior e body com altura total.
Mídia em bloco e responsiva
Sem espaço de linha de base embaixo das imagens e sem transbordar.
Formulários herdam a fonte
Inputs e botões combinam com o texto ao redor.
Quebrar palavras longas
URLs longas quebram a linha em vez de transbordar.
Títulos equilibrados
Linhas de comprimento parecido em títulos curtos.
Sem palavras órfãs
Evita uma palavra sozinha na última linha de um parágrafo.
Isolar a raiz da aplicação
Um novo contexto de empilhamento para que o z-index da aplicação não brigue com portais.
Rolagem suave até âncoras
Só para visitantes que não pediram menos movimento.