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?
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?
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.
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:
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.
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:
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: