Onze dicas para trabalhar com CSS: "Onze dicas para trabalhar com CSS (Cascading Style Sheets)
Por Erika Sarti, em 22/01/2007.
Introdução
Não importa se você é um iniciante na área ou já desenvolveu vários sites: a essa altura, você já está cansado de saber que as folhas de estilo externas são obrigatórias em qualquer projeto. Porém algumas dicas simples são sempre úteis para facilitar nosso trabalho. Veja 11 delas a seguir:
1 - div1 é diferente de menu
Evite dar nomes como div1, div2, div3 aos seus elementos. Eles não explicam nada e na hora da manutenção vão tornar seu trabalho mais lento. Da mesma maneira, barra_azul não faz muito sentido: e se você mudar a cor do site? Prefira nomes explicativos, como menu ou barra_links.
2 - Maiúsculas e minúsculas
Nomes de elementos fazem diferença entre letras maiúsculas e minúsculas: BarraLinks é diferente de barralinks. Preste atenção na hora de usar seu elemento no HTML.
3 - id x class
Para elementos que aparecem apenas uma vez no layout (menu, rodapé, cabeçalho, etc) prefira a declaração id, precedida por um sinal de # (como #menu). Para elementos que vão aparecer várias vezes, utilize a declaração class, precedida por um ponto (como .noticia)."
4 - Compartilhe declarações entre vários elementos comuns
Se vários elementos terão características em comum, declare-os todos de uma vez, separados por vírgula:
h1, h2, h3, h4 {
font-family: Arial, Helvetica, Sans-Serif;
}
5 - Lembre-se da hierarquia e organize-se
Por ser uma folha de estilo em cascata, a última declaração é a que prevalece. Preste atenção para não declarar um elemento duas vezes: na hora da manutenção, você pode fazer a alteração na primeira e se perguntar porque ela não funciona, quando na verdade uma segunda declaração está perdida no meio do seu código (por isso organização é fundamental!).
6 - Comente os códigos avançados
Quando você utilizar o CSS para efeitos mais avançados, como um menu em abas, comente seu código para não esquecer o que cada parte dele faz:
#menu ul li a
/* aba normal */
{background: #444; color: #FFF; border: 1px #FFF solid;}
#menu ul li a:hover{
/* aba selecionada*/
{background: #FFF; color: #F00; border: #F00 1px solid;}
7 - Anote suas cores
#09F ou #F09, qual é o rosa e qual é o azul? Mesmo se você conseguir fazer cálculos RGB de cabeça pra saber a tonalidade da cor sem uma tabela de cores hexadecimal, econonize tempo anotando a cor correspondente de cada código no seu arquivo:
/* ************************************ */
/* */
/* Cores usadas no layout */
/* */
/* cinza fundos: #F5F5F5; */
/* cinza bordas: #B6B6B6; */
/* azul link: #336699; */
/* azul lnk ativo: #003366; */
/* */
/* ************************************ */
8 - Declare as unidades
Quando trabalhar com valores diferentes de zero, declare as unidades (px, pt, etc). Cada navegador assume uma unidade padrão quando ela não é especificada, gerando resultados diferentes em cada navegador.
9 - Tenha certeza que o efeito desejado funciona em todos os navegadores
Barras de rolagem coloridas, divs semi-transparentes... Tudo isso é muito bonitinho, mas não funciona em todos os navegadores. Projete seu site de uma maneira atraente sem esses recursos, e, de novo, certifique-se de que seu CSS tem o mesmo efeito no maior número de navegadores possível.
10 - Não confie na sua memória
Com o tempo, é natural que decoremos os principais elementos e seus atributos. Mesmo assim, tenha sempre um guia de consulta rápida ao seu alcance, para tirar dúvidas sobre o funcionamento deles. Um ótimo livro que eu uso e recomendo é o CSS - Cascading Style Sheets - Guia de Consulta Rápida, de Luis Gustavo Amaral.
11 - Inspire-se
Sites como o css Zen Garden e o Maujour são ótimos para ter uma idéia das novas tendências. Visitar esses e outros endereços regularmente é recomendável.
Erika Sarti é web designer e trabalha como free-lancer desde 2000. É a responsável pelo novo layout do InfoWester, basicamente feito com tableless, um de seus assuntos preferidos. Seu portfólio está em www.erikasarti.net.
