Qual é a diferença entre Normalize.css e Reset CSS?

565

Eu sei o que é CSS Reset, mas recentemente ouvi falar sobre essa coisa nova chamada Normalize.css

Qual é a diferença entre Normalize.css e Reset CSS ?

Qual é a diferença entre normalizar CSS e redefinir CSS?

É apenas uma nova palavra da moda para a redefinição de CSS?

css normalize-css

— Jitendra Vyas
fonte

800

Eu trabalho no normalize.css.

As principais diferenças são:

O Normalize.css preserva os padrões úteis em vez de "desestabilizar" tudo. Por exemplo, elementos como supou sub"simplesmente funcionam" após incluir o normalize.css (e são realmente mais robustos), enquanto são visualmente indistinguíveis do texto normal após a inclusão do reset.css. Portanto, normalize.css não impõe um ponto de partida visual (homogeneidade) a você. Isso pode não ser do gosto de todos. A melhor coisa a fazer é experimentar com os dois e ver quais géis com suas preferências.
O Normalize.css corrige alguns erros comuns que estão fora do escopo do reset.css. Ele tem um escopo mais amplo que o reset.css e também fornece correções de erros para problemas comuns, como: configurações de exibição de elementos HTML5, falta de fontherança por elementos de formulário, correção de font-sizerenderização pre, excesso de SVG no IE9 e buttonbug de estilo no iOS.
O Normalize.css não bagunça suas ferramentas de desenvolvimento. Uma irritação comum ao usar reset.css é a grande cadeia de herança exibida nas ferramentas de depuração CSS do navegador. Esse não é um problema com o normalize.css devido aos estilos direcionados.
O Normalize.css é mais modular. O projeto é dividido em seções relativamente independentes, facilitando a remoção de seções (como as normalizações de formulário), se você souber que elas nunca serão necessárias ao seu site.
O Normalize.css possui uma documentação melhor. O código normalize.css está documentado em linha e de forma mais abrangente no Wiki do GitHub . Isso significa que você pode descobrir o que cada linha de código está fazendo, por que foi incluída, quais são as diferenças entre os navegadores e executar mais facilmente seus próprios testes. O projeto tem como objetivo ajudar a educar as pessoas sobre como os navegadores renderizam elementos por padrão e facilitar o envolvimento deles no envio de melhorias.

Eu escrevi com mais detalhes sobre isso em um artigo sobre normalize.css

— necolas
fonte

19

Com bastante frequência, você não os deixa em zero (ao usar a redefinição); portanto, você está escrevendo menos código. Se você deseja zerar alguns valores, esse estilo é acoplado ao elemento a que se destina e deve facilitar a depuração.

— Necolas

8

E isso é um problema significativo com muitas redefinições, incluindo o fato de que zerar tudo também diminui a velocidade do navegador.

— Rob

4

E que também é a vantagem de resets - acidentes normalizar dimensionamento questões como esta: github.com/yahoo/pure/issues/395

— Daniel Sokolowski

4

Perco o ponto quando penso que, sim, normalmente você não deseja que o preenchimento e a margem sejam zero, mas não quer o padrão também?

— guioconnor

9

Pessoalmente, saí do Normalize, embora ainda o use. Muitos dos pontos aqui são realmente exagerados (melhor documentação ...?). Normalizar é opinativo, por isso impõe um ponto de partida visual para você (apesar do que esta resposta diz). Também pode ficar desatualizado. O Reset.css nunca pode ficar desatualizado após o uso. E é mais provável que você queira que as margens e o preenchimento sejam 0 do que qualquer outro número que possa imaginar, por isso é realmente útil ter tudo redefinido durante o desenvolvimento. Normalizar é bom para problemas do navegador, no entanto, e esse é o principal motivo pelo qual eu o uso.

— Chuck Le bumbum

255

A principal diferença é que:

As redefinições de CSS visam remover todo o estilo do navegador interno. Elementos padrão como H1-6, p, strong, em, etc. acabam parecendo exatamente iguais, sem nenhuma decoração. Você deve então adicionar toda a decoração .
Normalizar CSS visa tornar o estilo interno do navegador consistente entre os navegadores. Elementos como H1-6 aparecerão em negrito, maiores, etc., de maneira consistente nos navegadores. Você deve adicionar apenas a diferença na decoração que seu design precisa.

Se o seu design a) segue convenções comuns para tipografia etc., b) Normalize.css funciona para o seu público-alvo, então usar Normalize.CSS em vez de uma redefinição de CSS tornará seu próprio CSS menor e mais rápido de escrever.

— Jesper M
fonte

6

@Jitendra Vyas: - existe realmente apenas uma maneira: leia o código Normalize.CSS, bem comentado, e decida se é adequado para suas necessidades ou não. github.com/necolas/normalize.css/blob/master/normalize.css #

— Jesper M

Outra observação: O Normalize.css pretende ser o mais discreto possível, o que permite que um desenvolvedor escreva seu código com mais facilidade, sem precisar combater conflitos de especificidade.

— precisa saber é o seguinte

então vamos dizer que eu quero usar reset ao desenvolver. E uma vez feito, quero o normalize.css ou algum JS que aceite todas as coisas que não foram alteradas e são iguais no navegador. Ou eu mudei e depois de mudar, eles se tornaram os mesmos do navegador e os removeram para o lado do cliente. Portanto, a redefinição ajudaria no desenvolvimento desse 'programa' no lado do cliente mais rápido. Ambos felizes. E maneira muito mais inteligente de viver.

— Muhammad Umer

Na prática, você acabará substituindo todos os estilos do Normalize de qualquer maneira. A teoria é ótima, mas neste mundo OOCSS nunca funciona dessa maneira na prática.

— Chuck Le Butt

40

O Normalize.css é principalmente um conjunto de estilos, com base no que o autor achou bom e faria com que parecesse consistente entre os navegadores. Redefinir basicamente retira o estilo dos elementos para que você tenha mais controle sobre o estilo de tudo.

Eu uso os dois.

Alguns estilos de Reset, outros de Normalize.css. Por exemplo, no Normalize.css, existe um estilo para garantir que todos os elementos de entrada tenham a mesma fonte, o que não ocorre (entre entradas e áreas de texto). A redefinição não possui esse estilo; portanto, as entradas têm fontes diferentes, o que normalmente não é desejado.

Então, basicamente, usar os dois arquivos CSS faz um trabalho melhor 'Equalizando' tudo;)

Saudações!

— Ricmetalster
fonte

1

Essa é uma resposta boa e pragmática. Não é necessariamente um ou outro. Pegue o que você quer de cada um. Eu gosto de uma reinicialização completa, mas o Normalizer oferece alguns bons pedaços que funcionam bem no topo.

— Undistraction

3

@ricmetalster, então você teve que reescrever seu próprio css para combinar funcionalidades de reset.css e normalize.css?

— precisa saber é

2

Se você deseja usar os dois, pode listar "redefinir" primeiro e depois "normalizar" e adicionar seus estilos por cima?

— Craig

Tomo a "não mais acho que" abordagem e usar ambos e chamá-los em tão inclui em meus importações SASS @import '_normalize' && '_reset'

— killscreen

6

A primeira reset.cssé a pior biblioteca que você pode usar, porque remove a estrutura padrão do HTML e exibe tudo o que você escreve como texto, depois de atribuir os valores de preenchimento de margem e outros atributos 0. Então, por exemplo, você descobrirá que <H1>será o mesmo que <H6>.

Por outro lado, Normalize.cssusa a estrutura padrão e também corrige quase todos os erros existentes nela. Por exemplo, ele corrige o problema de mostrar um formulário de um navegador para outro. Normalize as correções modificando esses recursos para que seus elementos sejam mostrados da mesma forma em todos os navegadores.

— N.Elsayed
fonte

1

Depende do seu caso de uso. Considerando o seu exemplo, se eu precisar modificar os estilos de fonte de todas as tags de cabeçalho do meu projeto, não utilizarei os valores padrão, pois não? Não se deve rotular uma biblioteca como sendo a "pior" apenas porque não é possível encontrar utilidade nos próprios projetos.

— Debojyoti Ghosh

Um dos principais objetivos da redefinição é combater problemas que surgem dos estilos aplicados pelo navegador, o que é muito útil. Eu também acho que não deve ser considerado uma biblioteca.

— Isaac Pak

@gdebojyoti Existem alguns casos de uso, mas raramente quero que todos os meus cabeçalhos tenham o mesmo tamanho, independentemente de seus respectivos estilos de fonte.

— James Beninger 13/09

5

Bem, a partir de sua descrição, parece que ele tenta tornar o estilo padrão do agente do usuário consistente em todos os navegadores, em vez de remover todo o estilo padrão como faria uma redefinição.

Preserva os padrões úteis, ao contrário de muitas redefinições de CSS.

— dbb
fonte

Então é melhor usar Normalize css sobre Reset?

— Jitendra Vyas

3

@Jitendra Vyas - não. As ferramentas são diferentes, não são melhores ou piores que as outras. Escolha o que ajuda a resolver os problemas que você tem melhor.

— Quentin

8

Eu teria que argumentar que a normalização é melhor do que redefinir. Isso resultará em menos CSS sendo transferido pela conexão, melhor uso dos padrões do UA e um melhor entendimento de como os elementos devem ser exibidos.

— Ryan Kinal

5

A redefinição parece ser uma necessidade para atender às especificações de design personalizadas, especialmente em projetos de design complexos e não padronizados. Parece que normalizar é uma boa maneira de prosseguir com a programação puramente na Web, mas muitas vezes os sites são um casamento entre a programação na Web e as regras de design da UI / UX.

— user3170099
fonte

É um exagero de 99% dos casos de uso.

— Michael

@ Michael qual deles? redefinir ou normalizar? (Apenas tentando compreender a mente das pessoas sobre o assunto)

— Bren

1

@Bren redefine e normaliza. Conhecer os valores CSS padrão para cada elemento faz parte de ser um bom desenvolvedor de front-end. Eu os vejo como métodos de forças brutas que são desnecessários.

— Michael

4

@ Michael> Knowing the default CSS values for each element is part of being a good front end developer- é como dizer que você prefere trabalhar com elétrons do que com uma linguagem de programação, porque é isso que faz um bom desenvolvedor. Usando ferramentas de forma eficiente faz de alguém um bom desenvolvedor, o contrário geralmente cai na categoria de fanáticos de desperdício de tempo

— nicholaswmin

1

Às vezes, a melhor solução é usar os dois. Às vezes, é usar nenhum dos dois. E, às vezes, é usar um ou outro. Se você deseja que todos os estilos, incluindo margem e preenchimento sejam redefinidos em todos os navegadores, use reset.css. Aplique todas as decorações e estilos você mesmo. Se você simplesmente gosta dos estilos internos, mas deseja mais sincronicidade entre navegadores, ou seja, normalizações, use normalize.css. Mas se você optar por usar o reset.css e o normalize.css, vincule primeiro a folha de estilo reset.css e depois a folha de estilo normalize.css (imediatamente) depois. Às vezes, nem sempre é uma questão de qual é melhor, mas quando usar qual versus quando usar os dois versus quando não usar nenhum. NA MINHA HUMILDE OPINIÃO.

— Sean Tank Garvey
fonte

0

Esta pergunta já foi respondida várias vezes. Breve resumo de cada uma delas, um exemplo e informações a partir de setembro de 2019:

Normalize.css - como o nome sugere, ele normaliza estilos nos navegadores para seus agentes de usuário, ou seja, os torna iguais em todos os navegadores devido ao motivo, por padrão, serem ligeiramente diferentes.

Exemplo : a <h1>tag interna <section>por padrão do Google Chrome será menor que o tamanho "esperado" da <h1>tag. O Microsoft Edge, por outro lado, está criando o tamanho "esperado" da <h1>tag. O normalize.css o tornará consistente.

Status atual : o repositório npm mostra que o pacote normalize.css possui atualmente mais de 500 mil downloads por semana. As estrelas do GitHub no projeto do repositório têm mais de 36k.

Redefinir CSS - como o nome sugere, ele redefine todos os estilos, ou seja, remove todos os estilos de agente do usuário do navegador.

Exemplo : faria algo assim abaixo:

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

Status atual : é muito menos popular que o Normalize.css, o pacote reset-css mostra algo em torno de 26k downloads por semana. As estrelas do GitHub são apenas 200, como pode ser observado no repositório do projeto .

— Daniel Danielecki
fonte