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 (CSS - Cascading Style Sheets) são obrigatórias em qualquer projeto. Felizmente, este recurso pode ser utilizado com algumas dicas simples 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 (felizmente, já do passado), divs semi-transparentes... Tudo isso é muito bonitinho, mas pode não funcionar em todos os navegadores. Projete seu site de uma maneira atraente evitando exagerar nos enfeites, 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 Maujor 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, sendo também responsável pelo layout do Infowester. Mais informações em seu blog - www.erikasarti.com - e em seu portfólio - www.erikasarti.net -.