CSS mínimo
Pode ser um problema quando se é preciso alterar arquivos CSS que não são de própria autoria – especialmente se estes foram feitos por alguém, digamos, pouco cuidadoso. 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.
Este artigo apresenta modelos de codificação CSS, apresentando um CSS mínimo; sugestões de sintaxe ou como deve ser a identação do CSS. O foco é 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.
Uma das bases do que consta aqui foi retirada 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.
“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]
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:
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:
img { border:0; }
CSS mínimo
Então, o arquivo final (ou seria “inicial”?) fica da seguinte maneira:
* {
margin:0;
padding:0;
}
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; }
Conclusão sobre CSS mínimo
Essas dicas sobre CSS mínimo 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. Você conhece mais alguma dica para um CSS mínimo?
Ah! E confiram as 70 dicas de CSS, porque realmente são muito boas!
Ótimo tutorial, parabéns!
Usarei essas dicas no meu próximo trabalho.
;]
@CACA [COBRA]
Obrigado!
Como recomendei no post, não deixe de conferir as 70 dicas; lá há muitas outras técnicas que não chegam a ser “obrigatórias”, mas que, dependendo do projeto e estilo do desenvolvedor, são de grande utilidade!
Apareça!
Um bom site com uma folha de estilos “mestra” é o http://www.crucialwebhost.com/blog/master-stylesheet-the-most-useful-css-technique/