desenvolvimento para web

Neste artigo, apresento uma proposta para um arquivo CSS mínimo, quer dizer, as declarações que, ao meu ver, são indispensáveis para uma folha de estilos.

O que me levou a escrever este artigo

Nos últimos dias, tive alguns problemas com arquivos CSS que tive que alterar - e que não fui eu, originalmente, quem os fiz. Cada desenvolvedor web tem seu estilo de codificação, isso é fato; outro fato é que fica complicado de prestar manutenção no trabalho alheio, caso os desenvolvedores não tenham acordado padrões de codificação entre si. Foi o meu caso…

Neste artigo, não tentarei apresentar modelos de codificação CSS, sugestões de como se deve posicionar as chaves, e como deve ser a identação dos textos. Estou focando nas regras, propriamente ditas, e não em como cada um prefere organizar seu código. Para tal, o Bruno Dulcetti já tratou muito bem, em seu blog.

Como não desejo que o mesmo aconteça com as outras pessoas, decidi apresentar como seria, na minha opinião e não muito extensos conhecimentos em CSS, algumas regras indispensáveis para qualquer folha de estilos.

Para constar, gostaria de deixar registrado que uma das bases do que vou apresentar aqui foi tirada da compilação 70 Expert Ideas For Better CSS Coding, do Smashing Magazine - e traduzida pelo Maujor, em seu blog; outra, vem do meu próprio conhecimento e experiência com CSS.

Sem mais enrolações, vamos ao que interessa!

“Zerar” os elementos

Para começar, é mais do que importante zerar, no o seletor universal, margin e padding:

* {
margin:0;
padding:0;
}


[update]
O Pedro Rogério falou sobre uma maneira melhor de zerar os elementos. Maneira essa que coloco aqui, também.
[/update]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

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;
vertical-align: baseline;
background: transparent;
}
 
body {
line-height: 1;
}
 
ol, ul {
list-style: none;
}
 
blockquote, q {
quotes: none;
}
 
:focus {
outline: 0;
}
 
ins {
text-decoration: none;
}
 
del {
text-decoration: line-through;
}
 
table {
border-collapse: collapse;
border-spacing: 0;
}

Podem ter certeza de que somente isso evitará, pelo menos, uma dezena de problemas com posicionamento - Eric Meyer, Christian Montoya e Roger Johansson, por exemplo, recomendam tal prática.

Um font-size “especial” para html

O próximo - e, aparentemente, excêntrico - passo é colocar um valor “especial” para font-size, na estilização do html:

1
2
3

html {
font-size:100.01%;
}

Essa veio, também, das 70 dicas, e a explicação é a seguinte:

Este estranho valor de 100.01% para o tamanho de fonte, corrige uma série de bugs em diversos navegadores. Primeiro, definir um tamanho de fonte no elemento body em percentagem (no lugar de EM) previne um problema no IE/Win que tende a aumentar ou diminuir desproporcionalmente o tamanho de fontes para textos contidos dentro de elementos onde for definido tamanho de fonte em EM. E mais, algumas versões do Opera renderizam tamanhos default de 100% para fontes muito menores, comparadas com outros navegadores. Safari, por sua vez não se comporta bem com font-size igual a 101%.

Retirar a borda feia das imagens que são link

Quando se coloca uma imagem para servir de link, uma borda aparece para indicar isso. Entretanto, ela é muito feia e, na maioria das vezes, “quebra” toda a harmonia do design web que está sendo utilizado. Para resolver isso, basta zerar o border do elemento img:

1
2
3

img {
border:0;
}

O tal “CSS mínimo”

Então, o arquivo final - ou seria “inicial”? :-) - ficaria da seguinte maneira:

* {
margin:0;
padding:0;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

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;
vertical-align: baseline;
background: transparent;
}
 
body {
line-height: 1;
}
 
ol, ul {
list-style: none;
}
 
blockquote, q {
quotes: none;
}
 
:focus {
outline: 0;
}
 
ins {
text-decoration: none;
}
 
del {
text-decoration: line-through;
}
 
table {
border-collapse: collapse;
border-spacing: 0;
}
 
html {
font-size:100.01%;
}
 
img {
border:0;
}

Por fim…

Essas dicas que eu coloquei são meras “medidas de segurança”, a fim de se evitar problemas com estilizações. Certamente outras mais existem, porque, a cada dia, uma nova técnica e/ou maneira de se codificar aparece - e/ou a própria tecnologia é aperfeiçoada. Quem conhecer mais dicas, macetes e artimanhas para um CSS mínimo, por favor, coloque um comentário aqui ou me envie um email para eu possa atualizar o artigo.

Ah! E confiram as 70 dicas de CSS, porque realmente são muito boas!