Todos los navegadores traen consigo estilos por defecto, que pueden variar entre sí. Tomando en cuenta que los elementos como márgenes, tamaños y espacios pueden mostrarse de forma distinta entre unos y otros, afectando directamente el diseño de tu sitio web. Para solucionarlo, podemos estandarizar (resetear o normalizar) los estilos antes de iniciar un proyecto web con los códigos: reset.css o normalize.css. Ambos hacen lo mismo pero con ligeras diferencias. Veremos a continuación las diferencias principales.
Ejemplo de un HTML con ambos estilos
Normalize CSS
- El código es más extenso
- Lo negativo es que da más soporte a muchos browsers que no estemos usando
- Algunas librerías o frameworks como Bootstrap ya traen Normalize instalado por defecto
- Incluye algunos estilos por defecto, estos aplican igual para todos los navegadores
Reset CSS
- Pone todos los valores en cero “0″, por lo que se deben definir las variables nuevamente
- El código es bastante corto
- Toma más tiempo definir las variables
Como conclusión, ambos cumplen las mismas funciones. Sin embargo, yo recomiendo Reset CSS sí vas a trabajar en un proyecto muy grande, eres un experto en CSS y tienes el tiempo para definir cada estilo de variable desde cero. Por otro lado, recomiendo mucho Normalize, si estas comenzando en CSS o no quieres perder mucho el tiempo definiendo las variables básicas. De todas formas, es importante que siempre veamos cómo se ve nuestro sitio en todos los navegadores (Chrome, Firefox, Opera, Safari, Edge, etc). Por último, hay una nueva versión del Reset de Eric Meyer si vas a usar HTML5 con HTML5 Reset CSS