Restablecimiento y normalización de CSS

Cada navegador tiene una hoja de estilos del agente de usuario integrada, con estilos predeterminados para encabezados, márgenes, rellenos, listas y elementos de formulario. Estos valores predeterminados varían entre navegadores y provocan apariencias incoherentes.

Un CSS reset elimina todos los valores predeterminados del navegador para ofrecerle una base limpia. El famoso reset de Eric Meyer establece en cero o en none el margen, el relleno y muchas otras propiedades.

Normalize.css adopta un enfoque diferente: en lugar de eliminar todos los valores predeterminados, hace que los valores predeterminados del navegador sean coherentes y corrige errores conocidos, al tiempo que conserva valores útiles, como los tamaños de los encabezados.

Comparación:

• Reset: base limpia, usted define todo y requiere más trabajo
• Normalize: base coherente que conserva valores predeterminados útiles y requiere menos código personalizado

Un reset moderno popular, creado por Josh Comeau, se centra en los valores predeterminados más importantes:

Hacer que las imágenes tengan display: block elimina el espacio en línea predeterminado (causado por line-height) que aparece debajo de las imágenes dentro de los contenedores:

Elimine los marcadores y la sangría de las listas al aplicar estilos a listas de navegación o de interfaz personalizadas:

En muchos navegadores, los elementos de formulario (input, button, textarea) no heredan la fuente de forma predeterminada. Una solución habitual es:

Tailwind CSS incluye su propio reset, llamado Preflight, basado en modern-normalize. Si utiliza Tailwind, ya tiene un reset aplicado automáticamente.

Coloque siempre la hoja de estilos de reset/normalize en primer lugar, antes que cualquier estilo de componente o utilidad. El orden de la cascada garantiza que sus estilos sobrescriban el reset sin conflictos de especificidad.

En lugar de incluir un reset completo de terceros, cree un reset mínimo propio adaptado a su proyecto. Incluya únicamente las reglas que necesite para mantener pequeño el tamaño del CSS.

Los estilos predeterminados de los navegadores son incoherentes. Los CSS reset eliminan todos los valores predeterminados; normalize.css los hace coherentes. Los reset modernos se centran en las reglas más importantes, como box-sizing: border-box, las imágenes con ancho máximo y las fuentes heredadas para los elementos de formulario. Cargue siempre el reset en primer lugar.