:: Dicas básicas para projetar Folhas de Estilos ::

Neste artigo relaciono algumas dicas para projetar Folhas de Estilos e espero que elas se constituam em uma fonte de consulta útil para os que se iniciam nas CSS. Se você tem uma sugestão de dica, sinta-se à vontade para enviá-la por e-mail que terei prazer em colocá-la aqui.

1^o.-) Organize

...sua Folha de Estilos agrupando blocos de regras CSS similares e colocando comentários no início e no fim de cada bloco.

Por exemplo:

/* Estilizacao geral de links */
a:link {
	......
	}
a:visited {
	......
	}
a:hover {
	......
	}	
a:active {
	......
	}
/* Fim da estilizacao geral de links */

2^o.-) Ordene

...suas regras CSS em uma sequência que faça algum sentido.

Por exemplo:

regras CSS para elementos gerais do HTML;
regras CSS para links gerais;
regras CSS para listas;
regras CSS para as divs na ordem que aparecem no HTML
seguidas por regras CSS para elementos dentro das divs;
regras CSS para classes gerais;
outras.

Nota: A sequência mostrada é para fins ilustrativos. Você deverá criar uma sequência que atenda suas necessidades.

3^o.-) Escolha

...uma ordem para declarar propriedades dentro de uma regra CSS e mantenha esta ordem para todos os seletores.

Por exemplo: (ordem alfabética)

body { 
	background: #fff;
	color: #000;
	font-size: 14px;
	margin: 0;
	padding: 0;
	}
#conteudo {
	background: #ffc;
	color: #333;
	float: left;
	height: 600px;
	width: 180px;
	}

Nota: A ordem alfabética sugerida é para fins ilustrativos. Você deverá criar a sua ordem.

4^o.-) Agrupe

...seletores sempre que for possível e conveniente.

Por exemplo:

h1, h2, h3, h4, p, ul, li { 
	margin: 0;
	padding: 0;
	}

5^o.-) Use

...a herança CSS para simplificar sua Folha de Estilos.

Por exemplo:

body { 
	.......;
	font: 14px Arial, Helvetica, Sans-serif;
	.......;
	}
#principal {
	.......;
	font-style: italic;
	.......;
	}

A div#principal herdará font-size e font-family de body, não sendo necessário declará-las.

6^o.-) Tire proveito

...do efeito cascata para simplificar sua Folha de Estilos.

Por exemplo:

h1, h2, h3, h4, h4, h5, h6 { 
	background: #ffc;
	border: 1px solid #f00;
	color: #000;
	text-align:right;
	}
h1 {
	color: #036;
	}

Todos os cabeçalhos (do nível 1 ao 6) terão a mesma cor de fundo, cor da fonte, borda e serão alinhados à direita. Para o cabeçalho de nível 1 altera-se a cor da fonte, não havendo necessidade de se repetir as regras CSS comuns.
Nota: Para que se aplique o efeito cascata como sugerido, faz-se necessário que a regra para h1 seja escrita após a regra para todos os níveis

7^o.-) Escreva

...regras CSS de forma abreviada para as propriedades que assim as admitem.

Por exemplo:

Escreva assim:
p {
	margin: 10px 8px 0 20px;
	}
E não assim:
p { 
	margin-top: 10px;
	margin-right: 8px;
	margin-bottom: 0;
	margin-left: 20px;
	}

8^o.-) Família

...de fontes deve ser declarada em uma regra CSS para fontes e não uma fonte única. Termine sempre com uma fonte genérica (p ex: serif, sans-serif, mono, etc...)

Por exemplo:

Escreva assim:
p {
	font-family: Verdana, Arial, Helvetica, Sans-Serif;
	}
E não assim:
p { 
	font-family: Verdana;
	}

9^o.-) Nomes

...para classes, divs e seletores em geral devem ser escolhidos considerando-se sua função (ou desempenho estrutural no código). Evite escolha de nomes que lembrem sua posição ou aparência.

Por exemplo:

Boas escolhas:
#principal
#navegacao-secundaria
#menu-principal
.link-um
.tit-um

Más escolhas:
#direita
#menu-superior
.link-verde
.tit-grande

10^o.-) Background-image

...não requer uso de aspas na declaração do caminho para a imagem na regra CSS.

Por exemplo:

Prefira assim:
body {
	background-image: url(/imagens/bg-geral.gif)
A assim:
body {
	background-image: url("/imagens/bg-geral.gif")

Nota: IE/Mac encontra dificuldades com as aspas neste caminho.

11^o.-) Links

...e suas pseudo classes devem ter regras CSS declaradas em uma ordem rígida para funcionarem convenientemente.

Esta é a ordem:

a:link {...)
a:visited {...)
a:hover {...)
a:active {...)

Leitura complementar

12^o.-) Sublinhados

...identificam histórica e claramente os links. Ao decidir retirá-los certifique-se de que eles (links) serão facilmente identificados no documento, quer seja por estarem gupados em uma coluna de navegação por exemplo, ou por outra característica inequívoca.

13^o.-) Habitue-se

...a usar somente letras para nomear classes e seletores CSS. Eventualmente use hífen para separar. O uso de números, underscore e caracteres especiais, quando não proibidos são permitidos com restrições ou mesmo estão sujeitos a regras de uso e particularidades que não convém decorar. Com esta prática, se você não conhece as regras de uso, estará evitando problemas com má escolha sintática.

Página mostrando os caracteres permitidos