8

Ouvi falar sobre o CSS reset e também tenho conhecimento do Normalize CSS que é um tipo de reset para que os navegadores renderizem CSS básico de maneira padronizada.

Procurando a melhor solução em CSS, me surgiu a dúvida: Qual utilizar?

3
  • Agradeço pelo seu tempo, Dorival! Mas fiquei com uma dúvida sobre o seu comentário: Se eu usar o normalize, e ele definir algumas características comuns a alguns dos meus elementos, e depois usar o reset, e ele resetar as características, não perde um pouco o sentido? Já que um está sobrescrevendo o outro? Desculpa se entendí errado mas foi isso que me pareceu.
    – Tiago P.C
    Commented 24/11/2015 às 12:50
  • O respeito da sobrescrita é o detalhe, nesse ponto geralmente são coisas minimas como tamanho da font dos "h"s ou um espaçamento de "input", que são sobrescritos, ele não vai sobrescrever por exemplo um "box-sizing" ou um "p line-height: 1em". Pra mim são coisas minimas que se forem algo que realmente te incomodem você pode retirar na lib do Normalize, mas, recomento que você use este. Commented 24/11/2015 às 13:02
  • 1
    Muito obrigado pelo seu tempo e pelos seus ótimos comentários, @DorivalZanetto. Entendí e vou optar então por usar os 2. Novamente obrigado, me ajudou muito!
    – Tiago P.C
    Commented 24/11/2015 às 13:04

2 Respostas 2

9

O objetivo dos arquivos de reset para o css nada mais são do que, como o nome já diz, resetar o estilo padrão que alguns elementos possuem.

Por exemplo, os botões possuem um fundo cinza, as listas possuem as marcações nas laterais, os títulos possuem margens, tabelas possuem bordas, etc..

Tudo isso são estilos nativos dos elementos. Esses arquivos de reset irão "eliminar" esses estilos SOBRESCREVENDO com o css contido nesse reset.css.

Por exemplo:

button {
    border:none;
    background:transparent;
}

Este código css irá fazer com que os botões não tenham mais esse estilo.

Por que fazer isso?

O motivo de utilizar um reset seria para evitar que as propriedades padrões interfiram com o layout que VOCÊ está criando. Se você utilizar um botão próprio que possua cores vivas, etc.. Não vai ficar bacana com um botão cinza, ou não vai ter o mesmo tamanho. Então um dos motivos seria a melhoria visual.

Outro motivo, seria a melhoria ESTRUTURAL. Veja a imagem abaixo:

inserir a descrição da imagem aqui

Essa é uma tabela com o estilo padrão. Além do visual não ser atrativo, note que ela possui bordas indesejáveis, que irão atrapalhar na sua estrutura. Para remover essas bordas, nós usamos um reset para a tabela.

Qual usar?

Não existe um reset melhor que o outro, nem o mais correto a ser usado, nem restrição de usar somente um, somente outro, ou até mesmo de usar mais de um ao mesmo tempo. O que você deve fazer é analisar o que você precisa e quanto precisa 'limpar' do código padrão. Muitos deles irão criar um css para elementos que muitas vezes você nem irá usar.

Eu, particularmente, cheguei ao ponto de não usar nenhum reset pré-definido. Eu mesmo removo os estilos padrão dos elementos que utilizo e que preciso.

Para complementar sua leitura, achei esses links que me pareceram interessantes:

2
  • Muito obrigado pela resposta, agora entendí exatamente a diferença e o que fazer!
    – Tiago P.C
    Commented 24/11/2015 às 12:43
  • Fico feliz em poder ajudar! Se tiver mais dúvidas, não hesite em questionar =D Commented 24/11/2015 às 12:46
3

Reset

Um reset como o próprio nome diz irá resetar todas as configurações pré-definidas dos navegadores, desta forma você poderá definir o seu próprio css,sem utilizar as características que cada navegador utiliza.

Normalize

Normalize como o próprio nome diz irá normalizar, isto é, ele tentará deixar os estilos padronizados em todos os navegadores.

Portanto se você deseja definir o seu próprio css sem interferência das regras definidas pelo navegador utilize reset , se você quer começar por base em algo que já possui alta compatibilidade nos navegadores e acrescentar as suas regras Normalize será melhor.

Deixo uma literatura complementar sobre o assunto:

CSS: reset or normalize?

Forget normalize or resets; lay your own CSS foundation

7
  • Sendo assim não tem lógica eu usar os 2, certo?
    – Tiago P.C
    Commented 24/11/2015 às 12:36
  • @TiagoP.C Exatamente, se você utilizar os dois estará sobrescrevendo algumas regras, o reset limpa tudo. o Normalize analisa todas as regras boas e as mantem e substitui as ruins pelas boas, neste caso digo boas como as mais compativeis nos navegadores. Commented 24/11/2015 às 12:43
  • Entendí, decidí que vou fazer meu próprio reset, se der certo manterei, caso venha a ter problemas com diferentes navegadores opto pelo Normalize. Muito obrigado @Gabriel Rodrigues pela resposta, foi muito útil!
    – Tiago P.C
    Commented 24/11/2015 às 12:44
  • @GabrielRodrigues, descordo no ponto de que "se você utilizar os dois estará sobrescrevendo algumas regras" isso não é uma regra, veja bem, se precisarmos realmente que todos os elementos de formulários sejam padronizados, por mais que seja elaborado um bom Reset, tenho certeza que este, jamais será tão bom quanto o Normalize por exemplo, pois este segundo é feito baseado não apenas nos navegadores mais conhecidos mais em uma serie deles, alguns que talvez nem conhecemos. Já se eu precisar de um *{margin: 0}, o Normalize não tem por default, então preciso colocar em um Reset. Commented 24/11/2015 às 13:21
  • 1
    Note agora, que são duas coisas que podem sim ser usadas em conjuntos, e altamente recomendáveis por grandes dev. front como o "csswizardry" na documentação do ITCSS, sendo que a questão de sobrescrita não é uma regra, como já disse e as vezes é necessário utilizar ambos para facilidade de organização e bons padrões de dev. sendo que não aconselho alterar lib de terceiros e essas muitas vezes não atendem todas as nossas necessidades. Por isso aconselho utilizar os dois e dei -1. Commented 24/11/2015 às 13:23

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .