Análise do CSS Reset de Josh Comeau

Vou explicar em detalhes o CSS Reset proposto por Josh Comeau, que é uma abordagem moderna para normalizar estilos entre navegadores. Este reset é mais sofisticado que os tradicionais (como o de Eric Meyer) porque leva em conta particularidades de acessibilidade e renderização moderna.

O Reset Completo

/*
  1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
  box-sizing: border-box;
}

/*
  2. Remove default margin
*/
* {
  margin: 0;
}

/*
  3. Allow percentage-based heights in the application
*/
html, body {
  height: 100%;
}

/*
  4. Add accessible line-height
  5. Improve text rendering
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/*
  6. Improve media defaults
*/
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/*
  7. Remove built-in form typography styles
*/
input, button, textarea, select {
  font: inherit;
}

/*
  8. Avoid text overflows
*/
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/*
  9. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

Explicação Detalhada de Cada Parte

1. Modelo Box-Sizing Intuitivo

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

O que faz: Define que o tamanho (width/height) de todos os elementos inclui padding e borda, não apenas o conteúdo.
Por quê: O modelo padrão (content-box) é contra-intuitivo pois adiciona padding e borda ao tamanho total. Com border-box, um elemento com width: 100px e padding: 20px terá 100px no total.

2. Remoção de Margem Padrão

* {
  margin: 0;
}

O que faz: Remove todas as margens padrão dos elementos.
Por quê: Diferentes navegadores aplicam margens diferentes em elementos como <body>, <h1>-<h6>, <p>, etc.

3. Alturas Baseadas em Porcentagem

html, body {
  height: 100%;
}

O que faz: Permite que elementos filhos usem porcentagem na propriedade height.
Por quê: Por padrão, o elemento body não tem altura definida, então height: 100% em elementos filhos não funciona sem isso.

4. Line-Hand Acessível e Suavização de Fonte

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

O que faz:
- line-height: 1.5 define um espaçamento entre linhas acessível (em vez do padrão ~1.2)
- -webkit-font-smoothing: antialiased suaviza fontes em macOS
Por quê: Melhora a legibilidade e aparência do texto.

5. Padrões Melhorados para Mídia

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

O que faz:
- Torna elementos de mídia block (evita espaço extra abaixo de imagens)
- Impede que excedam o container
Por quê: Elementos como <img> são inline por padrão, o que pode causar espaçamento indesejado.

6. Reset de Tipografia em Formulários

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

O que faz: Faz com que elementos de formulário herdem estilos de fonte do pai.
Por quê: Por padrão, esses elementos não herdam estilos de tipografia, o que pode quebrar a consistência visual.

7. Prevenção de Overflow de Texto

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

O que faz: Permite que palavras longas quebrem e evitem overflow horizontal.
Por quê: Melhora a responsividade, especialmente em mobile.

8. Contexto de Empilhamento Raiz

#root, #__next {
  isolation: isolate;
}

O que faz: Cria um novo contexto de empilhamento (stacking context) para aplicações React/Next.js.
Por quê: Previne problemas com z-index quando se usa bibliotecas/modais.

Vantagens Deste Reset

Mais moderno que resets tradicionais
Focado em acessibilidade (line-height, text rendering)
Melhor experiência mobile (overflow handling)
Mais intuitivo (box-model)
Otimizado para frameworks modernos (React/Next.js)

Quando Usar

Este reset é ideal para:

Projetos novos
Aplicações React/Next.js
Projetos que priorizam acessibilidade
Sites responsivos