O que é um CSS Reset?

CSS Reset — é um conjunto de regras CSS concebido para estabelecer estilos básicos uniformes para todos os elementos HTML por padrão, superando as diferenças nos estilos padrão dos navegadores. Isto ajuda a garantir uma visualização mais previsível e compatível entre navegadores.

Objetivos principais do CSS Reset:

• Eliminar ou reiniciar as margens (margin, padding) e bordas padrão.
• Reiniciar os tamanhos de fonte e os espaçamentos entre linhas padrão para títulos, parágrafos, etc.
• Uniformizar o estilo das listas (ul, ol).
• Reiniciar os estilos para tabelas, formulários, imagens e outros elementos.

Exemplo de CSS Reset básico:

/*
   CSS Reset: Reinicia os estilos padrão dos navegadores
   para garantir uma aparência básica uniforme dos elementos.
*/

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Inclui padding e border na largura/altura total do elemento */
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased; /* Suavização de fontes */
}

img, picture, video, canvas, svg {
  display: block; /* Remove o espaço padrão abaixo das imagens inline */
  max-width: 100%; /* Garante que as imagens não saiam do contêiner */
}

input, button, textarea, select {
  font: inherit; /* Herda a fonte do elemento pai */
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word; /* Permite quebra de palavras longas */
}

Existem várias variantes de CSS Reset, como o Reset CSS de Eric Meyer ou Normalize.css. Normalize.css, ao contrário de uma reinicialização completa, mantém estilos úteis padrão, corrigindo apenas aqueles que causam problemas de compatibilidade. A escolha entre eles depende do projeto e das preferências do desenvolvedor.