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!