Reset CSS

Quizás habrás observado que los navegadores insertan ciertos estilos por defecto. Esto es fácil de comprobar, si sólo escribes HTML sin indicar ningún estilo CSS. Observarás que la página muestra algunos elementos con cierto estilo, como por ejemplo, que los <body> tienen márgenes o que los <h1> tienen un cierto tamaño y margen.

Observa este fragmento al que le añado un CSS mínimo con borde rojo para que se aprecie:

h1 {
  border: 1px solid red;
}

p {
  border: 1px solid red;
}

<h1>¡Hola!</h1>
<p>Esto es un ejemplo de LenguajeCSS.com, ¿Qué tal estás?</p>

Entre las cajas hay un borde rojo hay cierta cantidad de espacio. Esto ocurre porque los navegadores tienen un margen por defecto en los elementos <p> y <h1>.

No obstante, a parte de los citados márgenes, hay muchos otros estilos predeterminados del navegador, que incluso pueden variar dependiendo del navegador. Esto complica un poco el trabajo de hacer que se vean los estilos exactamente igual en diferentes navegadores.

¿Qué es un Reset CSS?

Muchos programadores prefieren resetear todos los estilos del navegador, de modo que sea mucho más sencillo que los estilos sean similares entre diferentes navegadores. Algunos de esos estilos son:

Resetear márgenes con margin: 0 en ciertos elementos como body, <h1> o <p>.
Utilizar propiedades como box-sizing para facilitar cálculos de dimensiones.
Utilizar display: inline-block para elementos por defecto inline que ignoran tamaños.

Estas son algunas de las tareas de reseteo más frecuentes. Sin embargo, existen muchas más.

Reseteos parciales

Muchos desarrolladores prefieren crear sus propias reglas CSS para resetear los estilos del navegador, por lo que insertan fragmentos de código CSS para hacerlo. Veamos un ejemplo, donde he decidido resetear los márgenes:

body {
  margin: 0;
}

h1, p {
  margin: 0;
  border: 2px solid red;
}

<h1>¡Hola!</h1>
<p>Esto es un ejemplo de LenguajeCSS.com, ¿Qué tal estás?</p>

Muy frecuentemente, algunos desarrolladores utilizan el selector * para aplicar reseteos. Ten mucho cuidado al hacer esto, porque con * le estás diciendo al navegador que a todos los elementos HTML le apliques un cierto estilo. Aunque puede ser lo que buscas, muchas veces puede ser poco eficiente o puedes estar modificando cosas que no deberías en todo el documento.

¿Qué Reseteos CSS existen?

Para hacer más sencilla esta tarea, muchos diseñadores han creado su propio «pack» de reseteos, donde contienen múltiples líneas de código CSS que eliminan estas particularidades, de forma que todos los navegadores actuén de forma mucho más predecible y se pueda escribir CSS sin cambios imprevistos.

Tradicionalmente, han habido muchos sistemas de reset en CSS, pero sólo algunos se han quedado hasta estos días. Citaré los que creo que son más conocidos y relevantes:

Sistema de reseteo	Descripción
Reset CSS	El reset de Eric Meyer, históricamente, quizás el primero.
Normalize.css	Uno de los reset más tradicionales y populares.
A Modern CSS Reset	El reseteo CSS de Andy Bell.
A CSS Reset for 2022	CSS Reset 2022 de Mayank99
Reset CSS Pro	Reset CSS de Eduardo Fierro.
CSS Remedy	CSS Remedy, de Jen Simmons
Preflight	Reset CSS de Tailwind CSS
Josh W. Comeau	Un reset moderno, explicado paso a paso.
Andy Bell	Un reset moderno de Andy Bell.
2024 CSS Reset	Simple Reset CSS

Utilizar un sistema de reset CSS es decisión del desarrollador y no es algo obligatorio. En algunos casos, quizás pueda ayudar a que el desarrollador realice pasos en sus diseños de forma mucho más intuitiva.