ComoQueFaz.net

Uma hiper dica para css neste artigo saiba sobre os padroés mais usados em várias empresas de TI que criam sites, ou até mesmo para você ter sua própria organização em seu site.

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º) 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.