Usar reset CSS o normalizar

Cada navegador tiene su propia interpretación de las etiquetas de HTML, y aunque en gran medida son muy similares siempre hay pequeños detalles que hacen la diferencia, además existe la posibilidad que que cada usuario asigne estilos por defecto a sus preferencias de navegación, cambiando tipografías, colores, etc.

En el caso de la imagen asociada a este artículo, podemos ver cómo un mismo documento es presentado en Chrome (izq) y Firefox (der) de manera muy similar pero con una diferencia importante en cuanto al interlineado del texto.

Para evitar esto por mucho tiempo se ha usado una técnica llamada «Reset CSS», lo cual significa básicamente volver todos los valores de estilo a cero, para poder aplicarles diseño según sea nuestro antojo. Hay diferentes hojas de estilos CSS que algunos desarrolladores han creado y que podemos utilizar libremente en nuestros proyectos, el más popular de ellos es el reset de Eric Meyer, y hay otras alternativas mucho más sencillas como la que yo estuve utilizando por un buen tiepo, que es la de asignar márgenes y rellenos de «0» a todos los elementos de la página:

*{
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
	border: none;
	outline: none;
}

El problema con esta técnica, es que como dejamos cada elemento sin estilo deberemos darnos el trabajo de configurar cada uno de ellos. Aquellos elementos en donde no lo hagamos se mostrarán prácticamente como un texto plano.

Por ejemplo, supongamos que en un proyecto usamos la técnica básica del reset mencionada antes. En este proyecto inicialmente no se usan los elenentos dl, dt ni dd por lo tanto no nos preocupamos de darle estilos css. Cuando el proyecto está casi listo nos piden añadir una lista de definición, entonces aparte de escribir el html necesario, también deberemos encargarnos de su respectivo css.

Este tipo de situaciones se podrían evitar si en lugar de usar un reset, usaramos Normalize, el cual es una hoja de estilos (desarrollada por Nicolas Gallagher) que cumple una funcion muy similar al reset, donde en lugar de dejar los estilos en cero, se encarga de que los estilos base sean iguales en todos los navegadores, entoces sólo deberemos modificar aquellos elementos que sea necesario desde el punto de vista de nuestro diseño y el resto se mostrará con un estilo estándar.

En resumen

Con lo anterior no quiero decir que ya no se debe usar reset, sino que en aquellos proyectos donde no tenemos pensado invertir demasiado tiempo en css (porque no lo amerita) es mejor partir desde una base sólida como lo que ofrece normalize. Sin embargo, en un proyecto de gran envergadura, donde tendremos tiempo de trabajar en cada elemento es mejor partir desde un lienzo en blanco como lo que obtenemos después de aplicar reset.

De todos modos una de estas dos técnicas habrá que usar para que nuestro sitio se vea bien en todos los navegadores.

Si quieres aprender más de css y html, registrate en mi curso Diseño Web con HTML y CSS desde cero.