¿Qué es un CSS Reset?

CSS Reset — es un conjunto de reglas CSS diseñado para establecer estilos básicos uniformes para todos los elementos HTML por defecto, superando las diferencias en los estilos estándar de los navegadores. Esto ayuda a garantizar una visualización más predecible y compatible entre navegadores.

Objetivos principales de CSS Reset:

• Eliminar o restablecer los márgenes (margin, padding) y bordes predeterminados.
• Restablecer los tamaños de fuente y los interlineados estándar para encabezados, párrafos, etc.
• Uniformizar el estilo de las listas (ul, ol).
• Restablecer los estilos para tablas, formularios, imágenes y otros elementos.

Ejemplo de CSS Reset básico:

/*
   CSS Reset: Restablece los estilos predeterminados de los navegadores
   para garantizar una apariencia básica uniforme de los elementos.
*/

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Incluye padding y border en el tamaño total del elemento */
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased; /* Suavizado de fuentes */
}

img, picture, video, canvas, svg {
  display: block; /* Elimina el espacio predeterminado debajo de las imágenes en línea */
  max-width: 100%; /* Garantiza que las imágenes no salgan del contenedor */
}

input, button, textarea, select {
  font: inherit; /* Hereda la fuente del elemento padre */
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word; /* Permite dividir palabras largas */
}

Existen diferentes variantes de CSS Reset, como Reset CSS de Eric Meyer o Normalize.css. Normalize.css, a diferencia de un restablecimiento completo, mantiene estilos útiles por defecto, corrigiendo solo aquellos que causan problemas de compatibilidad. La elección entre ellos depende del proyecto y las preferencias del desarrollador.