Organizar códigos é muito importante, principalmente quando trabalha-se em equipe. A organização dos códigos fontes de um projeto ajudará na eficiência do trabalho, pois ficará mais fácil fazer a manutenção do mesmo e procurar por alguma linha específica.
Vou mostrar algumas regrinhas que se aplicam aos códigos CSS para uma boa organização.
Ordene e agrupe por seletores
É conveniente separar o código por seletores, preferencialmente hierarquizados, já que o navegador lê o CSS de cima para baixo, assim, você mudará pequenas diferenças (cor, tamanho da fonte etc) de um seletor para outro.
A ordem que eu uso é: *, html, body, a:(link, hover, active, focus, visited), p, h(1, 2, 3, 4, 5, 6), table, tr, th, td, fieldset, legend, address, ul, li, ol, dl, form, input, select, label, textarea, div, img, span, #nomeId, .nomeClasse.
Esses são os seletores que eu mais uso nos projetos. No .css ficaria assim:
ul, li, .msg {}
ul {}
li {}
.msg {}
Mesmas propriedades para vários seletores
Acho que um dos maiores problemas dos CSS's é o fato de ter repetida as mesmas propriedades para vários seletores. Isso prejudica o código em sua estrutura e principalmente no seu tamanho, tanto visual quanto virtual. Veja o exemplo abaixo:
h1, h2, h3 {
font-weight:100;
}
a strong {
font-weight:100 !important;
}
strong {
font-style:italic;
font-weight:100;
}
#nav {
font-style:italic;
}
.msg {
font-style:italic;
}
/*Esse código pode ficar assim:*/
h1, h2, h3, strong {
font-weight:100;
}
a strong {
font-weight:100 !important;
}
strong, #nav, .msg {
font-style:italic;
}
Dica: Leia Dica de otimização de CSS I para ver uma técnica de aninhar as propriedades do CSS.
Declarações em ordem alfabética
Ordenar as propriedades em ordem alfabética ué. Entendeu não?
#container {
border:1px dashed;
color:#000;
margin:auto;
padding:1em 0;
width:700px;
}
Separar as cores
Separar as cores de bordas, backgrounds, textos etc. Se você precisar usar o mesmo CSS para outro projeto de cores diferentes não será necessário editar linha por linha.
body {
border-left:2px solid #040770;
border-top:2px solid #040770;
}
td {
background:#040770 url(../img/linkOn.gif) no-repeat right;
border:1px dashed #040770;
}
a:hover {
background-color:#040770;
padding-right:15px;
}
/*Com a separação do código fica assim:*/
body {
border-left:2px solid;
border-top:2px solid;
}
td {
background:url(../img/linkOn.gif) no-repeat right;
border:1px dashed;
}
a:hover {
padding-right:15px;
}
/*CORES*/
body, td {
color:#040770;
}
td, a:hover {
background-color:#040770;
}
Nomeie os blocos do CSS e separe-os com espaços duplos
Separe-os por blocos titulados, como no último exemplo. Fica mais fácil de entender.
/*LINKS*/
a:hover, a:active {
background:url(../img/linkOff.gif) no-repeat right;
color:#666;
cursor:pointer;
}
/*TEXTOS*/
p {
margin:15px 0;
}
p .msg {
margin:15px 6px;
}
p .ins {
list-style:none;
text-align:justify;
width:419px;
}
/*TITULOS*/
h1, h2, h3 {
margin-top:10px;
padding:0 0 3px 5px;
width:75%;
}
Últimas regras:
Tente não usar hacks (apesar dos IEk's não deixarem);
Use um CSS "global.css" para colocar as propriedades padrões e importar outros arquivos .css;
Se for um projeto maior, separe os arquivos .css para form's e seus filhos como input, label, textarea, .btn etc. Essa dica pode ser usada para outras situações como tabelas ou fieldsets;
Importe apenas o arquivo global.css no HTML;
Idente o código. A imagem do post é um ótimo exemplo;
Tente validar o seu código.
Depois desse artigo não devo continuar a série de otimização, acho que coloquei todas as que eu uso aqui. Mas se eu aprender alguma coisa nova, divulgo no blog.
;)
