5 dicas para deixar o seu código CSS mais legível e otimizado

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 e idente os elementos filhos

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. Então no processo de desenvolvimento, mantenha os espaços em braço, mas quando o arquivo CSS é finalizado, faça uma versão comprimida do mesmo, utilizando os compressores de CSS citados no final desse artigo.

Exemplo de um código não espaçado e não identado:

1
2
3

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:

1
2
3

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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.

1
2
3
4
5
6
7
8

/* ----- 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:

1
2
3

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:

1
2
3
4

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:

1

div#menu-lateral { padding-top: 10px; padding-right: 5px; padding-bottom: 15px; padding-left: 13px }

Podemos escrever assim:

1

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:

1

* { 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!

Rodolfo Pereira

Desenvolvedor Web. Siga-me no Twitter @rodolfoprr.