Al crear un sitio web, CSS casi siempre será imprescindible. Es igualmente importante mantener CSS mientras construye su sitio web. Sin embargo, siempre es mejor adelantarse al mantenimiento a partir de la línea de base. Para hacer esto, muchos desarrolladores usan un archivo de restablecimiento de CSS para evitar peleas también fuego CSS.
En esta publicación, descubrirá el archivo CSS Reset y aprenderá lo que hace. También aprenderá cómo funciona un archivo CSS y cómo implementarlo para el desarrollo web. Además, verá un ejemplo de un archivo de restablecimiento de CSS, muchos de los cuales existen. Finalmente, aprenderá por qué puede usar el restablecimiento de CSS en lugar de las otras opciones posibles.
Empecemos.
¿Qué es el restablecimiento de CSS?
El archivo de restablecimiento de CSS le permite omitir las inconsistencias en diferentes navegadores al crear sitios web. Todos los navegadores tienen reglas predeterminadas con propiedades y valores que se aplican a todas las páginas antes de que se carguen los archivos. Debido a la naturaleza en cascada de CSS, todos los estilos utilizados por el navegador permanecerán a menos que se reemplacen explícitamente. El archivo de restablecimiento de CSS cubre todas las reglas que los diferentes navegadores aplican de forma predeterminada y las restablece a su valor mínimo posible.
El siguiente video explica qué hace el archivo de restablecimiento de CSS y cómo usarlo.
Esto significa que sus valores no están configurados, ninguno o cero (un dígito), lo que significa que se eliminan todos los estilos que se pueden configurar. Este restablecimiento crea una línea base consistente para comenzar a crear reglas CSS, lo que da como resultado una vista más consistente en todos los navegadores. Por ejemplo, veamos cómo se vería un archivo de restablecimiento de CSS simple a continuación.
Ejemplos de reinicio de CSS
Restablecer CSS no es la única forma de crear una línea de base de este tipo, y también se puede hacer usando Normalizar. El archivo Normalizar cambiará las reglas para adaptarse al navegador cuya regla sea menos flexible, lo que difiere del enfoque de los archivos Restablecer CSS.
Veamos los ejemplos de código de cada tipo de archivo para ver las diferencias.
/*
Correct the font size and margin on `h1` elements within `section` and `article` contexts in Chrome, Firefox, and Safari.
*/
h1 { font-size: 2em; margin: 0.67em 0;}
El código anterior es un extracto del archivo Normalize; observe que las propiedades se establecen en el valor especificado. El equivalente de CSS Reset se verá como el siguiente código.
/*
Correct the font size and margin on `h1` elements within `section` and `article` contexts in Chrome, Firefox, and Safari.
*/
h1 { font-size: 1em; margin: 0;}
Este código sería una versión CSS Reset del código Normalize anterior que corrige el tamaño de fuente y los valores de margen para las etiquetas h1. Este código en realidad no proviene de un archivo de restablecimiento de CSS, sino que simplemente representa cómo un restablecimiento manejaría diferentes cosas.
Con todo eso en mente, echemos un vistazo a cómo se vería un simple fragmento de un archivo Restablecer en algunos casos.
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;
}
¿Por qué usar el restablecimiento de CSS?
El archivo de restablecimiento de CSS funciona de manera diferente al tratar de eliminar todos los estilos de navegador predeterminados para mantener la coherencia. Este enfoque no parece una gran diferencia, pero el hecho es que los dos métodos tienen resultados muy diferentes.
Veamos cada ejemplo y luego discutamos los resultados basados en nuestro primer sitio web.
El anterior es un ejemplo del primer sitio web jamás creado y utiliza HTML básico, no CSS. Como resultado, es una representación simple; los estilos aplicados se basan en la configuración predeterminada del navegador y no son consistentes entre los navegadores.
El archivo Restablecer elimina todas las configuraciones predeterminadas del navegador y puede ver la diferencia en la imagen a continuación.
El código del archivo Normalize está destinado a alinear los valores predeterminados en diferentes navegadores. 
Muchos desarrolladores prefieren el archivo de reinicio porque le permite abordar el proyecto sin tener en cuenta los ajustes preestablecidos. Algunos desarrolladores consideran que el uso de ambos tipos de archivos es demasiado repetitivo y contrario a las prácticas de desarrollo DRY.
Comience a usar el archivo de restablecimiento de CSS
La elección de usar uno y cuál usar es una preferencia personal, y hay mucho debate sobre su uso. Hay muchas opiniones y puntos de vista diferentes sobre las experiencias que los desarrolladores han tenido con su uso. A medida que continúe utilizando el archivo de restablecimiento de CSS, debe explorar los diferentes tipos de archivos de restablecimiento y sus consejos, trucos y experiencias.
También debe probar varios archivos de restablecimiento y aprender a usarlos en pequeños proyectos para descubrir cómo se siente acerca de cómo funcionan. Descubrir su zona de confort lo ayudará a determinar el mejor enfoque para el diseño.
