¿Cuál es la diferencia entre Normalize.css y Reset CSS?

565

Sé lo que es CSS Reset, pero recientemente escuché sobre esta nueva cosa llamada Normalize.css

¿Cuál es la diferencia entre Normalize.css y Reset CSS ?

¿Cuál es la diferencia entre normalizar CSS y restablecer CSS?

¿Es solo una nueva palabra de moda para el restablecimiento de CSS?

css normalize-css

— Jitendra Vyas
fuente

800

Yo trabajo en normalize.css.

Las principales diferencias son:

Normalize.css conserva valores predeterminados útiles en lugar de "desestilar" todo. Por ejemplo, elementos como supo sub"trabajo sólo" después de incluir normalize.css (y se hacen realmente más robusto) mientras que son visualmente indistinguibles de texto normal después de incluir reset.css. Entonces, normalize.css no te impone un punto de inicio visual (homogenia). Esto puede no ser del gusto de todos. Lo mejor que puedes hacer es experimentar con ambos y ver qué geles con tus preferencias.
Normalize.css corrige algunos errores comunes que están fuera del alcance de reset.css. Tiene un alcance más amplio que reset.css, y también proporciona correcciones de errores para problemas comunes como: configuración de pantalla para elementos HTML5, falta de fontherencia por elementos de formulario, corrección de font-sizerenderizado pre, desbordamiento de SVG en IE9 y buttonerror de estilo en iOS.
Normalize.css no satura tus herramientas de desarrollo. Una irritación común cuando se usa reset.css es la gran cadena de herencia que se muestra en las herramientas de depuración CSS del navegador. Esto no es un problema con normalize.css debido a los estilos específicos.
Normalize.css es más modular. El proyecto se divide en secciones relativamente independientes, lo que facilita la eliminación de secciones (como las normalizaciones de formularios) si sabe que su sitio web nunca las necesitará.
Normalize.css tiene mejor documentación. El código normalize.css está documentado en línea, así como de manera más completa en el Wiki de GitHub . Esto significa que puede averiguar qué está haciendo cada línea de código, por qué se incluyó, cuáles son las diferencias entre los navegadores y ejecutar más fácilmente sus propias pruebas. El proyecto tiene como objetivo ayudar a educar a las personas sobre cómo los navegadores procesan elementos de manera predeterminada y facilitarles la participación en la presentación de mejoras.

Escribí con mayor detalle sobre esto en un artículo sobre normalize.css

— necolas
fuente

19

Muy a menudo, no los dejas en cero (cuando usas reset), por lo que en realidad estás escribiendo menos código. Si desea poner a cero algunos valores, entonces ese estilo está acoplado al elemento para el que está destinado y debería facilitar la depuración.

— necolas

8

Y ESO es un problema importante con muchos reinicios, incluido el hecho de que poner a cero todo también ralentiza el navegador.

— Rob

44

Y ESA también es la ventaja de los reinicios

— Daniel Sokolowski

44

¿Me pierdo el punto cuando pienso que sí, normalmente no desea que el relleno y el margen sean cero pero, no, tampoco desea el valor predeterminado?

— guioconnor

99

Personalmente, he salido de Normalizar, aunque todavía lo uso. Muchos de los puntos aquí son realmente exagerados (¿mejor documentación ...?). Normalizar es obstinado, por lo que te impone un punto de partida visual (a pesar de lo que dice esta respuesta). También puede quedar desactualizado. Reset.css nunca puede quedar desactualizado después de usarlo. Y es más probable que desee que los márgenes y el relleno sean 0 que cualquier otro número que pueda imaginar, por lo que en realidad es útil tener todo restablecido cuando se está desarrollando. Sin embargo, Normalizar es bueno para los problemas del navegador, y esa es la razón principal por la que lo uso.

— Chuck Le Butt

255

La principal diferencia es que:

El restablecimiento de CSS tiene como objetivo eliminar todo el estilo del navegador incorporado. Los elementos estándar como H1-6, p, strong, em, etcétera terminan pareciéndose exactamente igual, sin ninguna decoración. Entonces se supone que debes agregar toda la decoración tú mismo.
Normalizar CSS tiene como objetivo hacer que el estilo del navegador integrado sea coherente en todos los navegadores. Elementos como H1-6 aparecerán en negrita, más grandes, etc., de manera consistente en todos los navegadores. Entonces se supone que debe agregar solo la diferencia en la decoración que necesita su diseño.

Si su diseño a) sigue convenciones comunes para la tipografía, etcétera, yb) Normalize.css funciona para su público objetivo, entonces el uso de Normalize.CSS en lugar de un reinicio CSS hará que su propio CSS sea más pequeño y más rápido para escribir.

— Jesper M
fuente

66

@Jitendra Vyas: - en realidad solo hay una forma: lea el código Normalize.CSS bien comentado y decida si es adecuado para sus necesidades o no. github.com/necolas/normalize.css/blob/master/normalize.css

— Jesper M

Otra nota: Normalize.css pretende ser lo más discreto posible, lo que permite a un desarrollador escribir su código más fácilmente sin tener que luchar contra conflictos de especificidad.

— zzzzBov

así que digamos que quiero usar reset cuando se desarrolle. Y una vez hecho, quiero normalizar.css o algún JS que tome todas las cosas que no he cambiado y que sean las mismas en el navegador. O he cambiado y después de cambiar se han convertido en lo mismo que en el navegador y los elimino del lado del cliente. Por lo tanto, restablecer ayudaría al desarrollar ese 'programa' en el lado del cliente más rápido. Ambos felices Y una forma mucho más inteligente de vivir.

— Muhammad Umer

En la práctica, terminará sobrescribiendo todos los estilos de Normalize de todos modos. La teoría es genial, pero en este mundo OOCSS nunca funciona de esa manera en la práctica.

— Chuck Le Butt

40

Normalize.css es principalmente un conjunto de estilos, basado en lo que su autor pensó que se vería bien, y lo haría parecer consistente en todos los navegadores. Restablecer básicamente elimina el estilo de los elementos para que tenga más control sobre el estilo de todo.

Yo uso ambos.

Algunos estilos de Reset, algunos de Normalize.css. Por ejemplo, desde Normalize.css, hay un estilo para asegurarse de que todos los elementos de entrada tengan la misma fuente, lo que no ocurre (entre las entradas de texto y las áreas de texto). Restablecer no tiene ese estilo, por lo que las entradas tienen fuentes diferentes, que normalmente no se desean.

Básicamente, usar los dos archivos CSS hace un mejor trabajo 'Ecualizando' todo;)

¡Saludos!

— ricmetalster
fuente

1

Esta es una buena respuesta pragmática. No es necesariamente uno u otro. Toma lo que quieras de cada uno. Me gusta un reinicio completo, pero Normalizer ofrece algunos detalles que funcionan bien en la parte superior.

— Desvío el

3

@ricmetalster, ¿tuvo que volver a escribir su propio CSS para combinar las funcionalidades de reset.css y normalize.css?

— Ayjay

2

Si desea utilizar ambos, ¿podría enumerar "restablecer" primero y luego "normalizar" y luego agregar sus estilos en la parte superior?

— Craig

Tomo el enfoque "no lo piense demasiado" y uso ambos y los llamo como se incluye en mis importaciones de SASS @import '_normalize' && '_reset'

— killscreen

6

Primero reset.csses la peor biblioteca que puede usar, porque elimina la estructura estándar de HTML y muestra todo lo que escribe como texto, después de asignar los valores de margen de relleno y otros atributos 0. Entonces, por ejemplo, encontrará que <H1>será lo mismo que <H6>.

Por otro lado, Normalize.cssutiliza la estructura estándar y también corrige casi todos los errores existentes en ella. Por ejemplo, soluciona el problema al mostrar un formulario de un navegador a otro. Normalizar corrige esto modificando estas características para que sus elementos se muestren de la misma manera en todos los navegadores.

— N.Elsayed
fuente

1

Depende de su caso de uso. Teniendo en cuenta su ejemplo, si necesito modificar los estilos de fuente de todas las etiquetas de encabezado para mi proyecto, realmente no tendré ningún uso de los valores predeterminados, ¿verdad? No se debe etiquetar una biblioteca como "peor" simplemente porque no se puede encontrar un uso en los propios proyectos.

— Debojyoti Ghosh

Uno de los propósitos principales de reset es combatir los problemas que surgen de los estilos aplicados por el navegador, lo cual es muy útil. También creo que no debería considerarse una biblioteca.

— Isaac Pak

@gdebojyoti Hay algunos casos de uso, pero rara vez quiero que todos mis encabezados sean del mismo tamaño, independientemente de sus estilos de fuente respectivos.

— James Beninger el

5

Bueno, según su descripción, parece que intenta que el estilo predeterminado del agente de usuario sea coherente en todos los navegadores en lugar de eliminar todo el estilo predeterminado como lo haría un reinicio.

Conserva valores predeterminados útiles, a diferencia de muchos restablecimientos CSS.

— dbb
fuente

Entonces, ¿es mejor usar Normalizar css sobre Restablecer?

— Jitendra Vyas

3

@Jitendra Vyas - no. Las herramientas son diferentes, no mejores o peores entre sí. Elija el que le ayude a resolver los problemas que tiene mejor.

— Quentin

8

Tendría que argumentar que la normalización es mejor que reiniciar. Se traducirá en menos CSS transferido a través del cable, un mejor uso de los valores predeterminados de UA y una mejor comprensión de cómo se deben mostrar los elementos.

— Ryan Kinal

5

El reinicio parece una necesidad para cumplir con las especificaciones de diseño personalizadas, especialmente en proyectos de diseño complejos que no son repetitivos. Parece que la normalización es una buena manera de proceder con la programación puramente web en mente, pero a menudo los sitios web son un matrimonio entre la programación web y las reglas de diseño UI / UX.

— usuario3170099
fuente

Es excesivo el 99% de los casos de uso.

— Michael

@Michael, ¿cuál? restablecer o normalizar? (Solo trato de entender la mente de las personas sobre el tema)

— Bren

1

@Bren reinicia y normaliza. Conocer los valores CSS predeterminados para cada elemento es parte de ser un buen desarrollador front-end. Los veo como métodos de fuerzas brutas que son innecesarios.

— Michael

44

@Michael> Knowing the default CSS values for each element is part of being a good front end developer: esto es similar a decir que preferirías trabajar con electrones en lugar de un lenguaje de programación, porque eso es lo que hace a un buen desarrollador. El uso de herramientas hace de manera eficiente alguien un desarrollador bien, a la inversa por lo general cae en la categoría de los fanáticos de perder el tiempo

— nicholaswmin

1

A veces, la mejor solución es usar ambos. A veces, es para usar ninguno. Y a veces, es usar uno u otro. Si desea restablecer todos los estilos, incluido el margen y el relleno de relleno en todos los navegadores, use reset.css. Luego aplique todas las decoraciones y estilos usted mismo. Si simplemente le gustan los estilos incorporados pero desea más sincronía entre navegadores, es decir, normalizaciones, utilice normalize.css. Pero si elige usar reset.css y normalize.css, primero enlace la hoja de estilo reset.css y luego la hoja de estilo normalize.css (inmediatamente) después. A veces no siempre se trata de cuál es mejor, sino cuándo usar cuál versus cuándo usar ambos versus cuándo no usar ninguno. EN MI HUMILDE OPINIÓN.

— Sean Tank Garvey
fuente

0

Esta pregunta ya ha sido respondida varias veces, resumiré brevemente cada una de ellas, un ejemplo y puntos de vista a partir de septiembre de 2019:

Normalize.css : como su nombre indica, normaliza los estilos en los navegadores para sus agentes de usuario, es decir, los hace iguales en todos los navegadores debido a que, por defecto, son ligeramente diferentes.

Ejemplo : la <h1>etiqueta dentro <section>de forma predeterminada Google Chrome reducirá el tamaño de la <h1>etiqueta "esperado" . Microsoft Edge, por otro lado, está haciendo el tamaño "esperado" de la <h1>etiqueta. Normalize.css lo hará consistente.

Estado actual : el repositorio npm muestra que el paquete normalize.css tiene actualmente más de 500k descargas por semana. Las estrellas de GitHub en el proyecto del repositorio son más de 36k.

Restablecer CSS : como su nombre indica, restablece todos los estilos, es decir, elimina todos los estilos de agente de usuario del navegador.

Ejemplo : haría algo como eso a continuación:

html, body, div, span, ..., audio, video {  
   margin: 0;  
   padding: 0;  
   border: 0;  
   font-size: 100%;  
   font: inherit;  
   vertical-align: baseline; 
}

Estado actual : es mucho menos popular que Normalize.css, el paquete reset-css muestra que es alrededor de 26k descargas por semana. Las estrellas de GitHub son solo 200, como se puede ver en el repositorio del proyecto .

— Daniel Danielecki
fuente