Olá Mais uma vez. Neste artigo serão mostradas algumas dicas para projetar Folhas de Estilos para os iniciantes em CSS. Espero que elas se constituam em uma fonte de consulta útil para você que está iniciando o desenvolvimento CSS.

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

Exemplo:

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

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

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:  Você deverá criar uma sequência que atenda suas necessidades.

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

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

4- Agrupe seletores sempre que for possível e conveniente.

Exemplo:

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

5- Use a herança CSS para simplificar sua Folha de Estilos.

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- Tire proveito do efeito cascata para simplificar sua Folha de Estilos.

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.
Importante: 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- Escreva regras CSS de forma abreviada para as propriedades que assim as admitem.

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

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…)

Exemplo:

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

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

Exemplo:

/* Boas escolhas: */
#principal
#navegacao-secundaria
#menu-principal
.link-um
.tit-um
 
/* Más escolhas: */
#direita
#menu-superior
.link-verde
.tit-grande

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

Exemplo:

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

11- 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 {...)

12- 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 agrupados em uma coluna de navegação por exemplo, ou por outra característica inequívoca.

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


Emilio Mario Wieczorek

I talk about everything, I discuss everything, but I only support 🇧🇼Grêmio. 💻IT Manager, 🎮Gamer and 👽Jedi (or Sith, depending on the day).

0 comentário

Deixe um comentário

Avatar placeholder

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *