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.

1o.-) 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:

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

2o.-) Ordene

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

Por exemplo:

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

3o.-) Escolha

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

Por exemplo: (ordem alfabética)

CSS
CSS
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.

4o.-) Agrupe

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

Por exemplo:

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

5o.-) Use

...a herança CSS (link abre em nova janela) para simplificar sua Folha de Estilos.

Por exemplo:

CSS
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.

6o.-) Tire proveito

...do efeito cascata (link abre em nova janela) para simplificar sua Folha de Estilos.

Por exemplo:

CSS
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

7o.-) Escreva

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

Por exemplo:

CSS
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;
}

8o.-) 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:

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

9o.-) 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:

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

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

10o.-) Background-image

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

Por exemplo:

CSS
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.

11o.-) Links

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

Esta é a ordem:

CSS
a:link {...}
a:visited {...}
a:hover {...}
a:active {...}

Leitura complementar (link abre em nova janela)

12o.-) 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.

13o.-) 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)

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.