Todos sabemos que por defecto los navegadores traen consigo estilos: Si escribimos en un .html un <h1> seguramente este se dibuje más o menos al doble de tamaño que la fuente normal y que esté en negrita. Pero esto puede variar. No hay ninguna regla ni estándar que lo indique así que cada browser implementa el suyo
La problemática que esto nos genera es que ya desde el inicio estamos teniendo problemas para que nuestra web ofrezca la misma experiencia de usuario desde todos sus posibles puntos de acceso. Es ahí donde surgen 2 alternativas:
Reset.css
Reset.css es una hoja de estilos que quita todo el formato de los elementos: margin, padding, bordes, estilos de lista, tamaño de fuente, etc. De esta manera, tenemos la posibilidad de darle estilo propio a cada elemento
En un principio, en mis primeros diseños, era amante de esta hoja de estilos, porque me permitía configurar todo desde mi hoja de estilos. Pero con la práctica fui encontrando una debilidad: Cuando estoy maquetando, al no tener estilos predefinidos, cuesta distinguir que es cada cosa y eso no ayuda, es incómodo volver a ponerle valor a los elementos que reset.css le quitó. Es por esto que decidí inclinar la balanza y empezar a usar normalize.css
Normalize.css
Normalize.css lleva la funcionalidad de Reset.css a un nuevo nivel: ¿Para qué quitar todos los valores por defecto si podemos poner valores útiles a las etiquetas y usarlas para nuestro provecho? Y mi vida fue un poco más feliz
Con normalize, logro tener valores que me sirven visualmente y facilitan mi maquetación, es cierto que muchas veces algunos valores hay que modificar, pero son la minoría, con reset.css hay que modificar todos y cada uno
Para ser mucho más gráficos y dejar todo bien claro, vamos a utilizar el siguiente código html
Aquí visualizamos el resultado usando Reset.css
Y aquí usando Normalize.css (Comentando la linea donde se usa reset.css y descomentando la que importa normalize)
Espero que a alguno le sirva mi opinión y tampoco es la verdad, es simplemente una cuestión que resolví fijándome en la comodidad que me ofrece cada una de las herramientas
Aquí visualizamos el resultado usando Reset.css
Y aquí usando Normalize.css (Comentando la linea donde se usa reset.css y descomentando la que importa normalize)
Espero que a alguno le sirva mi opinión y tampoco es la verdad, es simplemente una cuestión que resolví fijándome en la comodidad que me ofrece cada una de las herramientas
Twittear Seguir a @3p_ar
