Não importa se você é um iniciante na área ou já desenvolveu vários sites: a essa altura, você já está cansado de saber que as folhas de estilo externas (CSS - Cascading Style Sheets) são obrigatórias em qualquer projeto. Felizmente, este recurso pode ser utilizado com algumas dicas simples para facilitar nosso trabalho. Veja 10 delas a seguir!
1 - div1 é diferente de menu
Evite dar nomes como div1, div2, div3 aos seus elementos. Eles não explicam nada e na hora da manutenção vão tornar seu trabalho mais lento. Da mesma maneira, barra_azul não faz muito sentido: e se você mudar a cor do site? Prefira nomes explicativos, como menu ou barra_links.2 - Maiúsculas e minúsculas
Nomes de elementos fazem diferença entre letras maiúsculas e minúsculas: BarraLinks é diferente de barralinks. Preste atenção na hora de usar seu elemento no HTML.3 - id x class
Para elementos que aparecem apenas uma vez no layout (menu, rodapé, cabeçalho, etc) prefira a declaração id, precedida por um sinal de # (como #menu). Para elementos que vão aparecer várias vezes, utilize a declaração class, precedida por um ponto (como .noticia).4 - Compartilhe declarações entre vários elementos comuns
Se vários elementos terão características em comum, declare-os todos de uma vez, separados por vírgula:h1, h2, h3, h4 { font-family: Arial, Helvetica, Sans-Serif; }
5 - Lembre-se da hierarquia e organize-se
Por ser uma folha de estilo em cascata, a última declaração é a que prevalece. Preste atenção para não declarar um elemento duas vezes: na hora da manutenção, você pode fazer a alteração na primeira e se perguntar porque ela não funciona, quando na verdade uma segunda declaração está perdida no meio do seu código (por isso organização é fundamental!).6 - Comente os códigos avançados
Quando você utilizar o CSS para efeitos mais avançados, como um menu em abas, comente seu código para não esquecer o que cada parte dele faz:#menu ul li a /* aba normal */ {background: #444; color: #FFF; border: 1px #FFF solid;} #menu ul li a:hover{ /* aba selecionada*/ {background: #FFF; color: #F00; border: #F00 1px solid;}
7 - Anote suas cores
#09F ou #F09, qual é o rosa e qual é o azul? Mesmo se você conseguir fazer cálculos RGB de cabeça pra saber a tonalidade da cor sem uma tabela de cores hexadecimal, econonize tempo anotando a cor correspondente de cada código no seu arquivo:/* ************************************ */ /* */ /* Cores usadas no layout */ /* */ /* cinza fundos: #F5F5F5; */ /* cinza bordas: #B6B6B6; */ /* azul link: #336699; */ /* azul lnk ativo: #003366; */ /* */ /* ************************************ */
Postar um comentário
0 comentários