Normalize.css vs Reset.css



¿Que es normalize.css?

Nornalize.css es una gran herramienta que permite, normalizar los estilos que vienen definidos por defecto en cada uno de los navegadores (Incluyendo los de dispositivos móviles)  para desarrollar proyectos web con algunos diseños básicos normalizados que facilitaran las cosas.

normalizeCss

Las diferencias que tiene normalize.css con respecto a reset.css son muchas, debo partir del hecho que reset.css, lo que hace es resetear todos los estilos, esto se debe a que los navegadores tienen estilos por defecto, pero cada navegador tiene estilos por defecto distintos, lo que hacia antiguamente que los desarrolladores debieran que tener en cuenta los estilos que tenia cada navegador y resetearlos para que el diseño del sitio no variara mucho de un navegador a otro. Lo que hace Reset.css es pasar todos estilos que pueden variar en los diferentes navegadores a cero, entonces, nos encontramos con problemas como que no hay margenes para listas o no hay margenes por defecto porque todo esto esta reseteado a cero.

Normalize.css lo que hace es normalizar los estilos css sin resetear los estilos que son esenciales,  por ejemplo, en el código de normalize.css puedo observar que al html se le define la tipografia sans-serif, el titulo H1 tiene un tamaño de 2em, los elementos b y strong tienen negrita, los bordes en las imágenes son de 0 píxeles y los formularios son especialmente normalizados en normalize.css.

Otro gran ventaja de usar normalize.css, es que este viene muy bien documentado, así se puede conocer de manera rápida lo que cada una de las lineas de código hace.

¿Como implementar normalize.css?

Se me ocurren tres maneras de incluir el código de normalize.css en algún proyecto.

1) Agregando la siguiente linea de código, que incluirá normalize.css desde GoogleCode:

<link rel=”stylesheet” src=”//normalize-css.googlecode.com/svn/trunk/normalize.css” />

2) Agregando el código de normalize.css al principio de la hoja de estilos principal del proyecto, el código puede ser descargado del enlace que se encuentra al final de este articulo.

3) Incluyendo la hoja de estilos normalize.css como una hoja adicional a la principal del proyecto, descargando el archivo de normalize.css dentro de la carpeta de estilos y llamándola de la siguiente manera:

<link rel=”stylesheet” src=”normalize.css” />

¿Y tú, que piensas de normalize.css?

Enlace: GitHub Normalize.css

 

3 thoughts on “Normalize.css vs Reset.css

  1. Buebo es la primera vez que voy a probar normalize y a ver que me resulta, siempre use el reset, pero espero que valga la pena probarlo!

  2. Y, la verdad lo utilicé en un proyecto, pero los elementos tenían margenes que no me interesaban que tuviesen, y tenía que ir reseteandolos de a poco. Al final unifiqué reset con normalize

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *