Zerando o CSS

Quando desenvolvemos sites que realmente funcionem em qualquer dispositivo, navegador, sistema operacional, etc. nos deparamos com situações peculiares. Quando páginas se comportam diferentes em navegadores diferentes o motivo pode ser o CSS e somente Zerando o CSS que esse problema acaba.

Porque zerar o CSS?

Quando construímos eventualmente os navegadores, intrometidos, interpretam tags com estilização própria. Por exemplo, o firefox dá uma margem no body que outros navegadores não dão. Paddings, fontes, alinhamentos, etc. podem ser ligeiramente diferentes de um navegador para outro. Nesse sentido, se você construir um site sem se preocupar com isso verá que ele será um pouco diferente ou até mesmo ficar todo quebrado, só de trocar de navegador.

Por conta desse problema algumas pessoas criaram formas de garantir que o CSS fique mais neutro, funcionando em todos os navegadores ao mesmo tempo. Note que as abordagens são ligeiramente diferentes mas têm o mesmo propósito.

Além disso, ao usar essas técnicas que neutralizam o CSS aplique o código no início e não depois. Caso contrário ele será impactado por alterações que você fez. Veja a seguir as 5 abordagens mais populares para isso.

1 – Reset CSS

Segundo o próprio site, o objetivo da reset css é reduzir inconsistências entre navegadores em aspectos como alturas de linha, margens e tamanhos de fonte dos títulos. Esses estilos são intencionalmente genéricos e devem ser ajustados para se adequar às necessidades específicas de cada projeto, sem definir cores ou fundos padrão para o elemento body. Eles servem como um ponto de partida e não como uma solução pronta e imutável. Eles estão em domínio público e podem ser usados e ajustados livremente.

/* 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;
}

2 – Normalize CSS

O Normalize CSS tem o mesmo propósito mas tem um CSS um pouco maior do que o reset css. Você pode utilizar o npm para instalá-lo em seu projeto com npm install normalize.css.

3 – Basic Front Boilerplate

Já o BFB (Basic Front Boilerplate) é baseado no ITCSS (Inverted Triangle CSS) que até já escrevemos um artigo aqui no blog sobre. Basicamente ele é um padrão de organização do seu CSS, estruturado em 7 camadas, sendo a terceira (Generic) a responsável por zerar os estilos.

Conclusão de Zerando o CSS

Zerar o CSS é essencial para garantir a consistência visual dos sites em diferentes navegadores e dispositivos. Ao neutralizar as estilizações padrão que cada navegador aplica, conseguimos um ponto de partida comum para desenvolver nosso design, evitando comportamentos inesperados e quebras no layout. Ferramentas como Reset CSS, Normalize CSS e metodologias como Basic Front Boilerplate são fundamentais nesse processo, pois permitem um controle maior sobre os estilos aplicados e asseguram que a aparência do site seja uniforme, independentemente do navegador utilizado.