CSS Reset – O que é, qual melhor e por que usar?

CSS Reset - Pressione o Botão

CSS Reset - Pressione o Botão

A idéia de CSS Reset é show, que nada mais é que um arquivo CSS que é iniciado antes de todos os outros e define as propriedades padrões para cada elemento da página, pois como você já devem saber, fazer um código funcionar em todos os navegadores é um sacríficio único e torturante, é ai que entra o CSS Reset para tentar ajudar um pouco nesse processo.

Diferenças

Cada projeto tem uma proposta, as vezes é ser mais leve, as vezes mais bonito, as vezes ser mais funcional e por ai vai, então cada projeto você terá uma necessidade especial, o que estou querendo dizer é que existem vários modelos de CSS Reset prontos na internet(logo citarei alguns), porém pode não ser o melhor para você em determinado projeto, pois poderá lhe dá até mais trabalho.

Problemas

Utilizar a técnica de CSS Reset irá exigir alguns sacrificios, abaixo irei citar alguns que achei[1] quando lia sobre, no final desse artigo/post você irá encontrar referencias para cada citação minha aqui, mas então vejamos:

– Consumo de processamento, como você irá redefinir o elemento você estará fazendo processamento desnecessário;
– Consumo maior de banda, já que você terá que colocar mais alguns KBs no seu código;
– Como visto nos itens anteriores, irá acarretar em uma demora maior para carregar a página;

Você pode ver mais detalhes e ver algumas alternativas em http://meiert.com/en/blog/20080419/reset-style-sheets-are-bad/ [Em Inglês]

Modelos de CSS Reset

Como já falei cada projeto irá exigir uma necessidade, pensando nisso, vários desenvolvedores, criaram seus próprios CSS Resets e disponibilizaram ao público e acredito que o mais usado é o do Eric Meyer[4], porém mesmo assim vou citar alguns que podem ser achados no blog do Pinceladas da Web[2].

Eric Meyer
A mesma que os templates padrões do WordPress usam, eu tenho usado e muitos outros usam também.

[css]
html, body, div, span, applet, object, iframe, table, caption,
tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend {
vertical-align: baseline;
font-family: inherit;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
:focus {
outline: 0;
}
body {
background: white;
line-height: 1;
color: black;
}
ol, ul {
list-style: none;
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
text-align: left;
}
blockquote:before, blockquote:after, q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
[/css]

Rudeworks
Técnica sugerida por Rudeworks:

[css]
* {
margin: 0;
padding: 0;
border: none;
}
html {
font: 62.5% "Lucida Grande", Lucida, Verdana, sans-serif;
text-shadow: #000 0px 0px 0px;
}
ul {
list-style: none;
list-style-type: none;
}
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
font-weight: normal;
margin: 0 0 1em 0;
}
cite, em, dfn {
font-style: italic;
}
sup {
position: relative;
bottom: 0.3em;
vertical-align: baseline;
}
sub {
position: relative;
bottom: -0.2em;
vertical-align: baseline;
}
li, dd, blockquote {
margin-left: 1em;
}
code, kbd, samp, pre, tt, var, input[type=‘text’], textarea {
font-size: 100%;
font-family: monaco, "Lucida Console", courier, mono-space;
}
del {
text-decoration: line-through;
}
ins, dfn {
border-bottom: 1px solid #ccc;
}
small, sup, sub {
font-size: 85%;
}
abbr, acronym {
text-transform: uppercase;
font-size: 85%;
letter-spacing: .1em;
border-bottom-style: dotted;
border-bottom-width: 1px;
}
a abbr, a acronym {
border: none;
}
sup {
vertical-align: super;
}
sub {
vertical-align: sub;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.8em;
}
h3 {
font-size: 1.6em;
}
h4 {
font-size: 1.4em;
}
h5 {
font-size: 1.2em;
}
h6 {
font-size: 1em;
}
a, a:link, a:visited, a:hover, a:active {
outline: 0;
text-decoration: none;
}
a img {
border: none;
text-decoration: none;
}
img {
border: none;
text-decoration: none;
}
label, button {
cursor: pointer;
}
input:focus, select:focus, textarea:focus {
background-color: #FFF;
}
fieldset {
border: none;
}
.clear {
clear: both;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
body {
text-align: center;
}
#wrapper {
margin: 0 auto;
text-align: left;
}

[/css]

Regra Básica
Esse é praticamente padrão, porém deve ser o mais consome processamento, por ter que processar todos os elementos:

[css]
* {
padding: 0;
margin: 0;
border: 0;
}
[/css]

Ateneu Popular CSS Reset
Regra Sugerida pelo site Ateneu Popular

[css]
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, 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-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
:focus { outline: 0;}
a, a:link, a:visited, a:hover, a:active{text-decoration:none}
table {    border-collapse: separate;border-spacing: 0;}
th, td {text-align: left; font-weight: normal;}
img, iframe {border: none; text-decoration:none;}
ol, ul {list-style: none;}
input, textarea, select, button {font-size: 100%;font-family: inherit;}
select {margin: inherit;}
hr {margin: 0;padding: 0;border: 0;color: #000;background-color: #000;height: 1px}

[/css]

Veja mais técnicas em [Pinceladas da Web] 10 Técnicas para Reset CSS.

Conclusão

Gostaria muito de me alongar mais nesse assunto, porém também tenho que trabalhar, mas com isso podemos ver que existem técnicas que concerteza irão nos ajudar a desenvolver mais rápido e/ou melhor, porém temos que avaliar se é realmente vantajoso, pois pode ser prejudicial o uso em determinados projetos.

Outra coisas que tiramos de bom, pelo menos pra mim é que devemos conhecer muito bem os clientes poderão acessar, mas principalmente conhecer todos os browser e sistemas operacionais que possível, eu por exemplo nunca testei um site que já tenha feito no Safari(MacOS X), espero ter oportunidade um dia.

Novamente espero que esse post tenha lhe ajudado a ter uma visão mais ampla e melhor sobre CSS Reset e como melhorar seu desenvolvimento, até a próxima.

Abraços

Fontes:
[1] http://meiert.com/en/blog/20080419/reset-style-sheets-are-bad/
[2] http://www.pinceladasdaweb.com.br/blog/2008/11/10/10-tecnicas-para-reset-css/
[3] http://developer.yahoo.com/yui/examples/reset/reset-simple.html
[4] http://meyerweb.com/eric/tools/css/reset/
[5] http://edsonjunior.com/por-que-usar-css-reset/

Comments are closed.