Um código CSS complexo e mal estruturado dificulta o seu entendimento e manutenção, por isso é importante seguir alguns padrões que deixam o seu código de uma forma limpa e organizada. No artigo, você irá encontrar 5 dicas básicas para aprimorar a organização e otimização do seu código CSS.
1. Utilize espaços em branco
Os espaços em brancos facilitam a leitura de um código CSS. Não escreva os elementos e as suas propriedades tudo junto sem nenhum espaço. Outra dica é identar os elementos filhos, pois destacam as dependencias entre os elementos.
Utilize os espaços em branco com bom senso: Eles influenciam no peso final do arquivo CSS.
Exemplo de um código não espaçado e não identado:
div#menu-esquerda{padding:10px;margin:5px;float:left;border:1px solid #333;width:300px;height:500px}
div#menu-esquerda-superior{font-size:12px}
div#menu-esquerda-inferior{font-size:14px;font-weight:bold}
Exemplo de um código espaçado e identado:
div#menu-esquerda { padding: 10px; margin: 5px; float: left; border: 1px solid #333; width: 300px; height: 500px }
div#menu-esquerda-superior { font-size: 12px }
div#menu-esquerda-inferior { font-size: 14px; font-weight: bold }
Há pessoas que preferem escrever o código com cada propriedade em uma única linha, por exemplo:
div#menu-esquerda {
padding: 10px;
margin: 5px;
float: left;
border: 1px solid #333;
width: 300px;
height: 500px
}
div#menu-esquerda-superior {
font-size: 12px
}
div#menu-esquerda-inferior {
font-size: 14px;
font-weight: bold
}
2. Comente o seu código
Comente o seu código CSS, separando-o em partes lógicas, mas não abuse dos comentários: Não comente partes desnecessárias que não irão servir para auxiliar o entendimento do código.
/* ----- Conteudo ----- */
div#conteudo { float: right: border: 1px solid #333 }
/* ----- Menu esquerda ----- */
div#menu-esquerda { padding: 10px; margin: 5px; float: left; border: 1px solid #333; width: 300px; height: 500px }
/* ----- Rodape ----- */
div#rodape { ... }
3. Agrupe os elementos com as mesmas propriedades
Se você possui elementos que compartilham das mesmas propriedades, agrupe-os e reaproveite o seu código. Caso esses elementos possuam alguma propriedade diferente, declare-as separadamente. Olhe o código abaixo:
li#ico-vinho { background: url(vinho.gif); padding-left: 10px; margin-left: 10px }
li#ico-uvas { background: url(uvas.gif); padding-left: 10px; margin-left: 10px }
li#ico-acessorios { background: url(acessorios.gif); padding-left: 10px; margin-left: 10px }
As propriedades padding-left e margin-left se repetem nos três elementos, logo, podemos otimizar esse código, escrevendo-o assim:
li#ico-vinho, li#ico-uvas, li#ico-acessorios { padding-left: 10px; margin-left: 10px }
li#ico-vinho { background: url(vinho.gif) }
li#ico-uvas { background: url(uvas.gif) }
li#ico-acessorios { background: url(acessorios.gif) }
4. Abrevie as propriedades
Abreviar as propriedades de algum elemento é uma ótima maneira de escrever um código pequeno. Caso você utilize mais de uma propriedade para o mesmo elemento, abrevie-os se possível.
Os elementos margin, border, padding, background, font e list-style são alguns exemplos que permitem a abreviação das propriedades.
Ao invés de declarar as propriedades assim:
div#menu-lateral { padding-top: 10px; padding-right: 5px; padding-bottom: 15px; padding-left: 13px }
Podemos escrever assim:
div#menu-lateral { padding: 10px 5px 15px 13px }
Sendo que o primeiro valor é o superior, o segundo valor é o espaçamento direito, terceiro valor é o inferior e o quarto é o espaçamento esquerdo.
5. Resete as propriedades do seu CSS
Utilize o CSS Reset para minimizar as diferenças de formatação dos elementos HTML que cada navegador tem por padrão. Você pode encontrar várias maneiras de resetar o código CSS no site CSS-Reset.com 
ou utilizar o código abaixo, que é um CSS Reset genérico:
* { border: 0; margin: 0; padding: 0; list-style: none }
Caso o tamanho final do seu arquivo CSS fique grande, você pode comprimi-lo, utilizando um compressor de CSS, como o CSS Compressor (http://www.csscompressor.com/ ) ou o CSS Optimizer (http://www.cssoptimiser.com/ ). Utilizando essa ferramenta, o tamanho final do seu arquivo CSS irá reduzir drasticamente.
Se você possui outras dicas para organizar ou otimizar o código CSS, por favor compartilhe conosco deixando um comentário.
Não deixem de votar na nossa enquete, para nós escrevermos os próximos artigos.
Até a próxima!
Loading ...