Reset CSS: Qué es, Ejemplos, Cómo Crear y Utilizar

En Alura, formo parte del equipo de Soporte Educativo y en medio de varias preguntas que surgen en el foro, algunas están dirigidas a la práctica de reset CSS. En este artículo, juntos entenderemos mejor cómo funciona esta técnica.

Reset CSS: ¿Qué es?

Cada navegador tiene su presentación por defecto y este comportamiento individualizado puede generar conflictos de diseño frente a tu proyecto web.

Y ese fue un problema al que se enfrentaron programadores y programadoras Front-end. A pesar de ser una técnica ***** simple, no fue fácil alcanzar un consenso mínimo sobre cómo "forzar" a todos los navegadores a comportarse de la misma manera. En 2007, Eric Meyer (hablaremos de él más adelante) en su blog, planteó la discusión sobre cómo lidiar con estas inconsistencias de los navegadores y generó una gran discusión. Estas inconsistencias que presentan los navegadores al mostrar o renderizar elementos pueden ser sutiles o más burdas, como diferentes medidas para el margen superior e inferior en los títulos o la altura de la línea estándar, que pueden afectar profundamente las alturas de los elementos y alineaciones. Aquí hay ejemplos de cómo se comporta el reset CSS cuando se usa:

Pudimos ver grandes diferencias en lo que el reset css puede hacer al diseño. Restablecimos tags que tenían valores iniciales que causaron el formato previo y nos devolvía un estilo básico, como en las tags h1, a, body etc. La técnica de reset CSS es una forma de suavizar estas diferencias y estandarizar el estilo superponiendo el formato original del navegador con una hoja de estilo. Por lo tanto, reset css se ha convertido en un archivo casi obligatorio en todos los proyectos web que existen.

¿Cómo utilizar?

Ya sabemos que es una hoja de estilo y que podemos usarla como normalmente usamos las hojas de estilo en un proyecto web, ya sea dentro del archivo HTML o en un archivo externo (y al que pueden acceder todos los demás archivos).

Lo más común es que antes de comenzar a estilizar el proyecto, el archivo reset css ya está agregado para que se elimine el formato original de los navegadores.

Porque si se agrega el reset CSS en medio del proyecto, por ejemplo, puede generar dolores de cabeza ya que el layout se creó tomando como referencia el formato de los navegadores y no la estandarización de los elementos que fueron reiniciados.

¿Cómo crear Reset CSS?

Entendemos que para mitigar el formato original entre diferentes navegadores, debemos seleccionar todas las tags y agregarles los resets, como margin, padding, border, etc.

Cada uno puede crear su propio reset CSS de acuerdo con las necesidades de su proyecto o también puede utilizar algún reset listo. Uno de los más utilizados y conocidos fue desarrollado por Eric Meyer, en el blog nos explica un poco sobre la técnica y cómo desarrolló su código reset.

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Tenga en cuenta que divide las tags en grupos que deben recibir valores genéricos, como margin: 0, border: 0, padding: 0 y otras que necesitan valores más específicos, como

ol, ul {
    list-style: none;
}

Donde toma el estilo de tag predeterminado que usa círculos para resaltar elementos de lista desordenados. También hay formas simplificadas que, particularmente utilizo más en mis proyectos, como el uso de selectores universales:

*, 
*:after,
*:before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}
body{
    font-size: 100%;
    list-style-type: none;
}

Entonces, según necesitas agregar valores a las propiedades, puedes hacerlo.

¿Cómo utilizar?

En su archivo html, dentro de la tag head, utilice la tag link para llamar al archivo donde estará su reset CSS, como en el ejemplo:

<link rel="stylesheet" href="reset.css">

Por lo tanto, la apariencia de su archivo se cambiará "reseteando" las tags con las propiedades con las que construyó su archivo reset.

Con el reset CSS agregado al proyecto, se pueden aplicar otros estilos de diseño sin prejuicios.

Normalize: ¿Qué es?

La idea de tener Normalize CSS es la misma que el Reset CSS, pero tiene algunas diferencias importantes en el momento de usarlo.

El objetivo principal de Normalize es hacer que el estilo estándar sea consistente en todos los navegadores. Se mantienen algunos estilos estándar de navegador que son útiles para el desarrollo de la página, se corrigen algunos bugs comunes entre los navegadores, algunas mejoras de usabilidad y también se comenta todo el código Normalize y con documentación sobre los cambios.

Las diferencias entre Reset CSS y Normalize:

• Reset CSS borra TODOS los estándares de los navegadores. Es una forma muy agresiva de "limpieza", mientras que Normalize aún mantiene estándares que son útiles.
• Normalize CSS corrige algunos bugs que existen en las estilizaciones estándares de los navegadores.
• Normalize es modular. Todo el código está separado por secciones específicas, por lo que puedes buscar cambios de manera más directa.
• Normalize tiene documentación detallada sobre su uso y justificaciones de los cambios que realiza.

¿Cómo utilizar?

Al igual que Reset CSS, Normalize es una hoja de estilos que debe importarse antes de cualquier estilización en el proyecto. Debe ser el primer archivo CSS que se importe al proyecto. Es importante "limpiar" el proyecto antes de comenzar a desarrollar.

¿Cómo implementar?

En su proyecto html, dentro de la tag head, usa la tag link, para llamar al archivo normalize.css, como en el ejemplo:

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

De esta manera, se eliminarán / cambiarán los estilos estándares de su proyecto, por lo que puede escribir su propia hoja de estilos sin preocuparse con las estilizaciones que el navegador coloca de forma estándar.

Si aún no eres parte de Alura y quieres saber más sobre cómo funciona el reset CSS y otras técnicas y aprender sobre el mundo Front-End aquí en Alura tenemos formación HTML5 y CSS3, con esos cursos aprenderás mucho más sobre el universo Front-End.

Laís Cavalcanti Como buena persona curiosa, me gusta leer, ver, escuchar y experimentar. Una entusiasta de la web accesible para todos. Hoy, formo parte del equipo de Apoyo Educativo.