Dicas básicas para projetar Folhas de Estilos CSS

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.

Fonte: http://maujor.com/tutorial/dicascss.php

Conteúdos relacionados:

1. 3 dicas para esconder a tela do seu micro no trabalho O escritório moderno apresenta um problema singular. A tecnologia que...
2. Veja dicas para melhorar sua conexão Wireless Cuidados básicos podem turbinar a velocidade de sua navegação Quando...
3. Dicas para melhorar sua rede Wireless em casa e no escritório Uma rede WiFi básica pode ser montada rapidamente em sua...
4. Dicas para novatos no Twitter! 2010 e o primeiro semestre de 2011 foram definitivamente o...
5. 5 dicas para não ser vítima de golpes por email Links anexos, arquivos que devem ser baixados e outra miríade...

Tags: css, div, dreamweaver, home page, html, html5, layers, tabelas