Onze dicas para trabalhar com CSS (Cascading Style Sheets)

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.