Dicas para melhorar seu CSS: Parte 1
Após certo tempo de aprendizado, conhecendo novas técnicas e, claro, experiência adquirida em trabalhos de pequeno e grande porte, podemos perceber diferenças entre um CSS bem feito, formatado e prático para manutenção, comparando-o com um CSS feito sem tanta experiência e, até mesmo, sem aquela “malandragem” na escrita.
Um exemplo de CSS simples, que não foi planejado para atender as necessidades de qualquer tipo de trabalho, em sua manutenção principalmente:
#menu {
float: left;
width: 120px;
background: #cacaca;
margin-left: 10px;
margin-bottom: 20px;
}
p {
margin-bottom: 5px;
text-indent: 10px;
}
a {
text-decoration: none;
}
#header {
background-image: url(../imagens/header.jpg);
background-repeat: no-repeat;
background-color: #000;
}
Este é um pequeno exemplo que já pode ilustrar muita coisa. Vou listar algumas “ingenuidades” do código acima, para elucidar o que pode ser feito para deixar o código menor, mais limpo e prático para manutenção.
Abreviação
Podemos pegar o último item do exemplo acima, para entendermos melhor a questão da abreviação no CSS.
#header {
background-image: url(../imagens/header.jpg);
background-repeat: no-repeat;
background-color: #000;
}
Ao invés de escrevermos desta maneira, poderíamos escrever tudo em uma linha só. Isso não é uma coisa óbvia, portanto tem que ser aprendido através de leitura e bastante prática, com certeza.
Abreviando, esta regra poderia ser re-escrita da forma abaixo:
#header {
background: url(../imagens/header.jpg) #000 no-repeat;
}
Simples, não? Assim podemos proceder em diversos casos, tanto em background, como margin, padding, font, e outras propriedades no CSS.
Formatação
Essa é mais uma questão pessoal do que realmente um padrão para escrita do código. Como se pode observar nos códigos acima, cada regra CSS foi escrita em várias linhas, reservando cada linha para uma propriedade, ficando mais fácil de ler. Porém, há uma outra maneira de escrever (a qual utilizo há um bom tempo), que é utilizar uma linha para cada regra inteira, mantendo todas as propriedades juntas, por exemplo:
#menu { float: left; width: 120px; margin: 0 0 20px 10px; background: #cacaca; }
No exemplo acima, apliquei a prática da abreviação do código, juntando as medidas de margin, além de manter a regra inteira em apenas uma linha. No começo é um pouco complicado, mas essa prática diminui muito o tamanho do arquivo e facilita a busca de determinada parte de seu código, mostrando mais regras de uma vez só em sua tela.
Aqui termina a primeira parte da série de posts sobre as melhorias que podemos fazer em nosso CSS. Algumas são utilizadas por preferência pessoal, mas outras realmente fazem diferença tanto para produção como a manutenção de qualquer projeto, seja de pequeno, médio ou grande porte.
Technorati Tags: CSS
Novo painel de controle do Dreamhost