Por que usar CSS Reset?

botão CSS Reset (uma metáfora para o problema)

Muito se discute sobre o uso de CSS Reset em desenvolvimento web. É um verdadeiro divisor de águas. Há quem o odeia e quem não viva sem (meu caso).

Especialistas divergem entre si e são muito políticos em suas defesas quanto ao uso ou não de resets. Tanto que confundem a cabeça de novatos nessa área e só fazem aumentar a necessidade de um veredito.

Pois bem, resolvi peitar uma defesa baseada em problemas que enfrento diariamente. E defino minha conclusão com uma pergunta mais que direta: “Como eu criava sites antes sem usar um CSS Reset?”

O que exponho aqui não é regra, mas uma abordagem pessoal. A diferença é que vou tentar te convencer do benefício da técnica e o espaço está aberto para uma discussão saudável.

Atlas segurando o globo sobre seus ombros contendo os browsers Internet Explorer, Firefox, Opera, Chrome e SafariVocê sabe, existem diferenças sutis na renderização padrão de cada browser. A maioria delas giram em torno de margens e preenchimentos de vários elementos, como parágrafos, títulos (h1, h2, …), elementos de linha e de bloco, tabelas e outros. Isso tudo é normal! Fiquei surpreso quando um dia descobri que o tamanho padrão de fonte para todos os browsers é de 16px. Pense, poderia ser 16px para um, 12px para outro…

Pois bem, essas diferenças necessitam ser zeradas para que o programador de interface, lá na frente, não perca tempo com adaptações, filtros e hacks em sua folha de estilo.

Aquela coluna direita que em um browser fica alinhadinha com o miolo do site desce como num passe de mágica no IE. Aquele parágrafo que começa próximo do topo de um elemento qualquer não está assim tão próximo em outro browser (não necessariamente o IE).

Qual o seu motivo?

Enfim, uma série de razões pelas quais um CSS Reset é necessário e não usamos – ou não queremos usar – também por uma série de fatores:

  • Uma requisição a mais de servidor? Ora, inclua na sua folha de estilos principal (sempre no cabeçalho antes de todas as outras declarações, claro!)
  • O arquivo .css fica “grande”? Mas o que são 5, 6 ou mesmo 10 linhas de código?
  • Tem elementos no Reset que não necessitam ser zerados? Sim, tem! Você não precisa zerar até as tags strong e em, por exemplo. Tenha em mente que uma das maiores dificuladades que enfrentamos enquanto programador de interface é com relação a margens e preenchimentos de elementos de nível de bloco.

Você que já procurou por CSS Reset nos mecanismos de buscas já deve ter lido algo tipo “Best CSS Reset” blá, blá, blá… Saiba que o melhor Reset é aquele que zera as propriedades que você vai implementar. Exemplo, não vai usar tabelas no seu site? Então porque zerar seus atributos?

Penso que quando Eric Meyer apresentou sua versão de Reset em 2008, o que ele queria mostrar é o tanto de atributos que você pode resetar.

/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Repare que ele declara o body com line-height = 1. Mas qual a unidade (em, px)? Achei isso falho.

Abaixo, o Reset do Yahoo!

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
	margin: 0;
	padding: 0;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
fieldset, img {
	border: 0;
}
address, caption, cite, code, dfn, em, strong, th, var {
	font-style: normal;
	font-weight: normal;
}
ol, ul {
	list-style: none;
}
caption, th {
	text-align: left;
}
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: normal;
}
q:before, q:after {
	content: '';
}
abbr, acronym {
	border: 0;
}

E aqui, a versão “mini”:

/* CSS Mini Reset */

html, body, div, form, fieldset, legend, label {
	margin: 0;
	padding: 0;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
th, td {
	text-align: left;
	vertical-align: top;
}
h1, h2, h3, h4, h5, h6, th, td, caption {
	font-weight:normal;
}
img {
	border: 0;
}

Conclusão

Como eu já disse, você não precisa manter todos os parâmetros no seu CSS Reset. O importante é que você saiba que está zerando as propriedades necessárias.

Eu particularmente na maioria das vezes retiro as tags bold, em e table. O resto, deixo como está e não tenho dores de cabeça em meus projetos.

E você? Ainda não usa um CSS Reset sem seus trabalhos? Dê sua opinião!

17 Comments

  1. Edson:

    Sobre estas palavras suas: “Repare que ele declara o body com line-height = 1. Mas qual a unidade (em, px)? Achei isso falho”, Meyer nao falhou (ele eh bom demais pra deixar isso passar). O valor de line-height por default eh 1.5 (se nao definir outra). Em seu reseter ele diz q todos os browsers renderizem o line-height em 1, independente la unidade q vc defina em font-size. Se definiu em:

    body {
    font-size: 14px;
    }

    Entao o line-height de 1 será 14px; se for 1em será 1em tb no line-height.

    Da uma olhada no meu novo reseter, suporta as novas etiquetas de HTML5.

  2. Só para ajudar, line-height não precisa de unidade de medida. Tanto que nem o validador do W3C acusa isso como erro.

  3. ed1nh0

    26 de julho de 2010 at 17:04

    Jorge, você tem razão. Declarações cujo valor é 0 (zero) não necessitam de unidade. No entanto esse parâmetro foge a regra, como você bem explicou.

    Obrigado por comentar!

  4. ed1nh0

    26 de julho de 2010 at 18:28


    Robson Sobral:

    Só para ajudar, line-height não precisa de unidade de medida. Tanto que nem o validador do W3C acusa isso como erro.

    Então, o que eu apontei como “falho” nada mais foi que a declaração de um dos criadores dos padrões do W3C (Eric Meyer). Vacilo meu!

    Valeu e não deixe de comentar!

  5. Cool…
    Gostei da versão “mini”, Ctrl+C; Ctrl+V…

  6. Olha só o que o G1 faz:

    *{
    background:transparent;
    font-family:inherit;
    font-size:100%;
    margin:0;
    outline:0;
    padding:0
    }

    body{
    background:#fff;
    line-height:1
    }

    table{
    border-collapse:collapse;
    border-spacing:0
    }

    legend,hr{
    display:none
    }

    li{
    list-style:none
    }

    a{
    text-decoration:none
    }

    caption,th{
    text-align:left
    }

    blockquote:before,blockquote:after,q:before,q:after{
    content:””;
    content:none
    }

    blockquote,q{
    quotes:”” “”
    }

    abbr,acronym,img,fieldset{
    border:0
    }

    sup{
    vertical-align:text-top
    }

    sub{
    vertical-align:text-bottom
    }

    input,textarea,select{
    font-family:inherit;
    font-size:inherit;
    font-weight:inherit
    }

    Interessante

  7. ed1nh0

    27 de julho de 2010 at 11:18


    Rafael V. Sesso:

    Olha só o que o G1 faz:

    *{
    background:transparent;
    font-family:inherit;
    font-size:100%;
    margin:0;
    outline:0;
    padding:0
    }

    (…)

    Interessante

    Então, declararam e resetaram somente o q lhes interessa. Só discordo do hack estrela. Eu particularmente não uso.

    Obrigado, Rafa!

  8. uso * tbm para resetar geral o/


  9. ed1nh0:


    Rafael V. Sesso:

    Olha só o que o G1 faz:
    *{
    background:transparent;
    font-family:inherit;
    font-size:100%;
    margin:0;
    outline:0;
    padding:0
    }
    (…)
    Interessante

    Então, declararam e resetaram somente o q lhes interessa. Só discordo do hack estrela. Eu particularmente não uso.
    Obrigado, Rafa!

    Este estrela que ele colocou não é hack para o IE, mas significa “aplicar a todos os elementos”. Utilizam isso como hack combinando com outros seletores mas, por definição, “* {…}” ou “.algumaclasse * {…}” significa “todos os elementos” e “todos os elementos dentro de .algumaclasse” respectivamente, por exemplo :)

    Achei o post muito interessante, uma visão diferenciada sobre o CSS Reset que ajuda a melhorar a utilização das mesmas.

    E parabéns pelo blog!

  10. Quase igual ao G1:

    * { margin: 0; padding: 0; outline: none; border: none; font-size: 100%; font-weight: normal }

    Não precisa mais! “inherit” não é necessário!

  11. Clap, clap, clap! Perfeito!

    Não dá pra ficar na mão do box-model dos browsers, principalmente os antigos; é mais simples zerar aquilo que você precisa e definir na mão, depois!

    Abs!

  12. ed1nh0

    27 de julho de 2010 at 17:53


    Talita Pagani:

    Este estrela que ele colocou não é hack para o IE, mas significa “aplicar a todos os elementos”. Utilizam isso como hack combinando com outros seletores mas, por definição, “* {…}” ou “.algumaclasse * {…}” significa “todos os elementos” e “todos os elementos dentro de .algumaclasse” respectivamente, por exemplo :)

    Achei o post muito interessante, uma visão diferenciada sobre o CSS Reset que ajuda a melhorar a utilização das mesmas.

    E parabéns pelo blog!

    Eu acho que estou precisando é zerar o CSS do meu cérebro!! rsrs

    Não aconselho usar o * (que NÃO é um hack, como vc bem disse) para zerar elementos.

    O * é muito genérico e atribui propriedades que determinados elementos do HTML não possuem. (ex. zerar a borda de um parágrafo ou o preenchimento de um link). Melhor partir de um Reset padrão.

    E obrigado pelo elogio!

  13. Good point. I myself use a reset, but have stripped it down so that it’s not as thorough. For example, I took out cite, dfn, var, q because I simply don’t use those tags when I code. Never have and probably never will. But I have found having a reset is great in terms of getting browsers to render things the same.

  14. Quando ele declara a unidade 1 no body, ele esta usando uma escala de números inteiros relativamente a cada fonte e seu respectivo tamanho, ou 1 é o tamanho padrão, 2 o dobro, 0.5 a metade e assim vai. Se ele usasse em px, iria afetar os textos que tivessem o tamanho de 16px, por exemplo, teria o mesmo espaçamento que um texto de 10px entre as linhas.

    • Sim, é isso mesmo. Quando mencionei que achava isso “errado” não estava querendo contrariar o Papa das CSS, mas apenas querendo deixar uma ressalva de que isso poderia afetar o aprendizado de iniciantes.

  15. Gabriel Fontenele

    22 de agosto de 2012 at 17:15

    Muito obrigado, mas muito obrigado mesmo!

    Estava com um projeto praticamente pronto e só tive esse problema. Testei os dois primeiros códigos no css do meu site, o primeiro padronizou, só que alterou todo o corpo que eu tinha criado como tamanho da fonte, tipo da fonte etc; já o segundo código, o do Yahoo, funcionou perfeitamente!

    Estava procurando há muito tempo uma solução para esse tipo de problema, muito obrigado por compartilhar!

  16. Valeu pelo post! Tirou uma dúvida que tinha e que via em vários códigos.

Deixe uma resposta

Your email address will not be published.

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

© 2014 Edson S. Júnior

Theme by Anders NorenUp ↑