Tecnología y Coaching para Emprendedores

Los Reset de CSS: Qué Son y Por Qué Usarlos

reset css

Una de las preguntas que me encuentro muchas veces por parte de mis alumnos es qué es un reset de CSS y por qué hemos de usar uno. Cuando te descargas Initializr para empezar un proyecto web rápidamente, te encuentras está línea de código:

 <link rel="stylesheet" href="css/normalize.min.css">

Esta sencilla línea de código trae muchas preguntas tanto en mi curso de diseño web básico como en el de diseño web responsive, pues muchas veces se desconoce lo que es un reset de CSS y que, además de normalize.css, tenemos varios resets disponibles.

Si no aplicamos un reset de CSS cada navegador interpretará el código básico como mejor le parezca, lo que puede llevarnos muchas más horas de trabajo para intentar normalizar el aspecto entre los distintos navegadores. ¿Por qué sucede esto? Porque los navegadores tienen distintos propietarios que hacen la competencia entre sí y no les interesa colaborar entre ellos, sino posicionarse como el navegador estándar.

reset de css ejemplo


Qué Son los Reset de CSS

Los reset de CSS básicamente nos permiten una puesta a cero de todos los navegadores para que muestren las propiedades de CSS del modo más homogéneo posible. ¿Por qué es esto necesario? Porque existen cientos de navegadores web en el mercado, cada uno de ellos con una hoja de estilos CSS básica diferente.

Significa esto que cada uno de ellos va a interpretar muchas cosas del código que pongamos como mejor les plazca, con lo que, sí de por sí ya es difícil tener en cuenta las diferencias entre los navegadores, sin un reset de CSS la cosa todavía se complica más. Con un reset de CSS no conseguiremos que nuestra web se va idéntica en todos los navegadores, lo que conseguiremos es hacer que interpreten las clases básicas de un modo igual.

Ejemplo de reset de CSS incluido en normalize.css:

body {
    margin: 0;
}

Lo que estamos haciendo con esta línea de código es decirle a todos los navegadores que en el body no apliquen ningún margen. Es algo que aparentemente puede parecer muy inocente, pero que puede facilitarnos mucho la vida.


Por Qué Usar un Reset de CSS

Aunque todos los navegadores coinciden en algunos valores importantes (tipo de letra serif, color de letra negro, etc.) presentan diferencias en valores tan importantes como los márgenes verticales (margin-bottom y margin-top) de los títulos de sección (h1,… h6), la tabulación izquierda de los elementos de las listas (margin-left o padding-left según el navegador) y el tamaño de línea del texto (line-height), entre otros.

Como hemos visto, el usar un reset de CSS hará que el aspecto de nuestro diseño se vea más igualado entre los navegadores, lo que facilitará el tener una buena experiencia de usuario. Es importante aquí tener en cuenta que seguirán habiendo diferencias cross-browser por otros motivos (ej. CSS3, navegadores antiguos, etc.), esto lo solucionaremos con lo que se conoce como mejora progresiva o progressive enhancement.


Inicializar los estilos

Cuando los navegadores muestran una página web, además de aplicar las hojas de estilo de los diseñadores, siempre aplican otras dos hojas de estilos: la del navegador y la del usuario.

reset css navegador usuario

Aquí lo que vemos es cómo se aplica la cascada del CSS. Lo que significa es que primero se carga el CSS del navegador, a continuación el CSS del usuario (el que se puede configurar manualmente en el navegador) y finalmente el CSS que nosotros creamos.


Resets de CSS Más Populares

Los resets de CSS más populares son:

  • Normalize CSS (usado por el Boilerplate)
  • HTML5 Doctor Reset CSS
  • Eric Meyer’s Reset
  • Yahoo! (YUI 3) Reset CSS
  • Universal Selector * Reset

Para HTML5/CSS3 es mejor usar Normalize o HTML5 Doctor Reset. Para xHTML (¡obsoleto!) puedes usar el de Eric Mehyer.


Cómo Usar los Reset de CSS

El reset de CSS normalize.css está optimizado para HTML5 y es el que uso yo en mis proyectos. Uno de los consejos que doy antes de usar un reset es que se personalice, ya que de otro modo estarás usando código que no necesitas o generándolo dos veces. Veamos el por qué.

En normalize.css encontramos este código:

h1 {
    font-size: 2em;
}

Si lo que queremos es que el tamaño de fuente del h1 sea 1.8em en lugar de 2em o 2.3em, en lugar de sobreescribir esta línea de código en nuestra hoja de estilos, lo ideal sería editarla o borrarla y añadirla en nuestro código.

Como todo el CSS, lo podemos incluir desde el head de nuestro HTML como un archivo separado o haciendo un copiar y pegar y añadiéndolo a nuestra hoja de estilos justo al principio. Yo perosnalmente uso la segunda opción por dos razones:

  • Una petición HTTP menos. Cada archivo, imagen, vídeo, etc. es una petición HTTP. Para mejorar el rendimiento web es necesario reducir las peticiones HTTP que no son imprescindibles.
  • Personalizar el reset a medida. Si en lugar de simplemente usar el reset de fábrica lo tuneas un poco y te lo haces a medida, es más fácil de editar a medida que tus necesidades cambian si lo tienes en la misma hoja de estilos, porque al final no recuerdas donde hiciste las modificaciones, si en el reset o en la hoja de estilos principal.

Esto ya es una cuestión de preferencias personales, si usas el reset de CSS tal y como viene, quizás es mejor tenerlo separado porque es más fácil adaptar las actualizaciones, pero esto ya es cuestión de gustos.


Para acabar…

Me he encontrado muchas veces con debates sobre si vale la pena o no usar un reset de CSS. Yo soy de la opinión que vale mucho la pena siempre y cuando lo personalices a medida del proyecto en el que estás trabajando. Si justo te estás iniciando en este mundo, te recomiendo mi curso de diseño web desde cero con HTML5 y CSS3 donde aprenderás paso a paso a crear un sitio web teniendo en cuenta las buenas prácticas y evitando cometer errores típicos de principiante :-)

Si te ha gustado el artículo, te animo a compartirlo en las redes sociales y a dejar un comentario.

¡Gracias por compartir!


Comentarios

  • Francisco Javier

    Estupendo árticulo para aclarar lo que son y como funcionan, yo los conocí cuando realize tu curso de diseño web desde cero y la verdad que aprendi bastante cuando empezer a iniciarme mas a fondo en este mundo. Cuando vi los reset en el curso los use sin saber mucho para que servían pero con este articulo ya lo tengo más que aclarado.
    Gracias por estos árticulos que publicas y la ayuda que ofreces desinteresadamente a los que no llevamos mucho tiempo en este mundo ya que particularmente valoro mucho el tiempo que dedicás a cada artículo aunque no siempre comente todos.

    Un saludo y gracias de nuevo por los aportes que haces.

    • Sandra

      Pues yo te agradezco mucho que te tomes el tiempo de dejar un comentario como este, porque me alegra el día, jeje. Gracias!

  • Oscar Alarcón

    Gracias por tus articulos Sandra, todos los días visito tu página para retroalimentarme más en el mundo del diseño web, espero en el próximo mes tomar tu curso. Saludos desde Puerto Vallarta, Jalisco, México.

    • Sandra

      Estupendo, Oscar, será un placer tenerte como alumno:) Un saludo!

  • Edwing Ovalle

    Hola, Sandra, de verdad que este tema me esta matando unas cuantas neuronas, :P y por ello de antemano muchas gracias por tratarlo y despejar un poco mas el panorama…. sin embargo mi pregunta es, si editamos el normalize a nuestras necesidades, en últimas ¿no es equivalente a crear nuestro propio reset?, me explico, ojeando el css de normalize tiene muchos estilos, y personalmente pienso que es mas práctico agregar los que necesitamos a nuestro reset, según lo que nos indique nuestro diseño, que “quitar” los que no necesitemos al ccs de normalize, con este proceder creo que estamos mas familiarizados con saber que tocar si necesitan cambios, también por otro lado en situaciones donde tu web solo llega solo a usar hasta por ejemplo títulos h3´s y el normalize le define estilos hasta los h6, es decir código de más, en ese contexto, no sería mas práctico darle los estilos a cada h# según se necesite por medio de una “class”?… Mis dudas te las hago con mucho respeto y agradecido por este espacio que nos brindas para ellas, aportando en mi campaña de “rescata mis neuronas” .. jeje, un abrazo Sandra :)

    • eSandra

      Hola Edwing, lo mejor que se puede hacer con los reset es personalizarlos a medida. No todo el mundo sabe crear un reset de CSS desde cero a mano, de aquí que herramientas como Normalize sean de gran ayuda. La gente que justo empieza no sabe tampoco personalizarlo, así que lo puede usar tal cuál. A partir de aquí, yo creo que la mejor opción es a partir de normalize.css crearse un reset personalizado para cada proyecto teniendo en cuenta las etiquetas que vayas a utilizar con visión de futuro.
      un abrazo!