CSS Reset – Como resetar seu CSS antes de programar seu sites.

Como todos já sabemos, os navegadores processam o CSS e suas propriedades de maneira diferente, o Mozilla processa de uma maneira, o Chrome de outra maneira e o IE estraga processa de outra e por assim vai.

Eu depois de muito tempo programando e utilizando alguns hacks e tricks para depois sair corrigindo alguns problemas que eu tinha com CSS vi que era possível resetar ou melhor dizendo… Inicializar as propriedades css de uma maneira padrão  utilizando o css reset. Todos os elementos já possuem alguma margem definida por padrão em cada Browser.

Com isso basta colocar o seguinte código bem no início de sua folha CSS :

* {
margin:0;
padding:0;
list-style:none;
vertical-align:baseline;
}

Pra mim já é o básico e funciona perfeitamente para mim.

Já se você quer fazer um super reset de todos os elementos do seu CSS existe um cara chamado Eric Meyer que fez um reset bem mais robusto, veja:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Com isto você pode sempre inicializar suas variáveis e componentes CSS de maneira mais simples e fácil de programar e manter.

Bom por hoje é só.

Espero que tenham gostado!

Não deixem de conferir nossa Fã Page : http://www.facebook.com/CodigoSimples