Dicas básicas para projetar Folhas de Estilos

Introdução

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 (link abre em nova janela) 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 (link abre em nova janela) 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 (link abre em nova janela)

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 (link abre em nova janela)

Compartilhe essa matéria com seus amigos