Técnicas de CSS Reset

CSS é a abreviação de Cascading Style Sheets, o CSS é a folha que dá estilo ao layout, através dele controlamos fontes, cores, larguras e alturas, margens e etc. Por padrão, os navegadores configuram alguns estilos como bordas e margens, mas, na hora de criar um CSS personalizado para o site, esses estilos padrões atrapalham, então é necessário zerar essas pré-definições. Um técnica bastante simples para se zerar os padrões do navegador é a seguinte.

* { margin: 0; padding: 0; border: 0; }

O asterisco seleciona todos os elementos, utilizamos o “margin”, “padding” e “border” em 0 para zerar os estilos e você pode configurar as margens em outros seletores. A técnica acima é a mais conhecida e mais utilizada, pois é bastante simples e funciona. Você pode acrescentar mais estilos, como “list-style: none;”, dependendo da sua necessidade.

Existem algumas outras técnicas de CSS prontas sugeridas por desenvolvedores e que também funcionam muito bem, recomendo testá-las para no futuro escolher uma que seja melhor para o seu projeto, veja:

Yahoo’s CSS Reset

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

Ateneu Popular CSS Reset

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}

Chris Poteet’s Reset CSS

* {
    vertical-align: baseline;
    font-family: inherit;
    font-style: inherit;
    font-size: 100%;
    border: none;
    padding: 0;
    margin: 0;
}
body {
    padding: 5px;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
    margin: 20px 0;
}
li, dd, blockquote {
    margin-left: 40px;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Eric Meyer Reset 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: "" "";
}

Todas estas técnicas vi no site Pinceladas da Web, e resolvi compartilhar com vocês, no post original existem algumas outras técnicas para você, recomendo que dê uma olhada.

Eu particularmente prefiro a técnica que citei no início do post, por ser bastante simples de escrever e funcional.

E você, qual técnica de Reset CSS usa?

Comente com alguma técnica que você usa e que não foi citada no post, espero que tenham gostado da dica e até o próximo post.

Jair Rebello

Empreendedor e Nômade Digital. Dedica grande parte do seu tempo para criar soluções como o Plugin SqueezeWP e o Template ConversionWP Premium que ajudam dezenas de milhares de empreendedores a desenvolverem seus negócios.

Website: http://www.rebello.blog.br