Campo de busca

Categoria Front-End

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

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

Por | 09 de novembro, 2009 | 3 comentários

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:

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 ou o CSS Optimizer. 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!

 

Deixe um comentário

Queremos saber o que você pensa sobre esse post! Ficaremos felizes se você nos deixar um comentário :-)

Tenha em mente que os comentários são moderados, e os links possuem rel="nofollow". Então por favor, não faça spam de palavras-chave, senão o seu comentário será excluído. Obrigado!

 

[3] Comentários  

Alessandro Guimarães

Olá Rodolfo Pereira, muito interessante estas dicas para otimizar e deixar o código legível. Mais dicas você poderá encontrar no blog do Maujor: http://www.maujor.com/blog/2007/05/29/70-dicas-para-escrever-css/

Obrigado!

05-02-2010 às 11:32 Responder

Vitor

Parabens, ótimos post me ajudou
Vitor Designer

01-04-2010 às 22:39 Responder

Bruno Prado

Muito bom cara, me ajudou muito o post. Poucos são os que se dão o trabalho de compartilhar o que sabem.

20-09-2016 às 14:56 Responder