10 dicas para escrever melhor seu CSS

Para aqueles que estão migrando agora para o desenvolvimento tableless a formatação CSS pode parecer um pouco confusa, principalmente se você não segue algumas regras de formatação. As dicas abaixo vão lhe ajudar a se localizar, entender e escrever um código melhor.

1) Sempre comece usando um CSS reset:

Todos sabemos que as vezes existem diferenças na renderização da pagina ente diferentes navegadores, dando enfase ao Internet Explorer, claro.

Desenvolvedores web perdem muito tempo tentando resolver essas diferenças e muitas delas podem ser resolvidas logo de cara com uma técnica chamada CSS Reset, que consistem em resetar todas as configurações de tamanho, margem e formatação existentes por padrão nos navegadores.

Você pode encontrar muitas técnicas de CSS Reset na internet que são realmente eficazes mas na maioria dos meus projetos eu uso uma pequena formatação que resolve 70% dos problemas:

*{
margin: 0;
padding: 0;
border:0;
}

Onde * significa que esses atributos serão aplicados a todas as tags da pagina HTML, nesse caso setando os valores de margin, padding e border para 0.

2) Facilite a identificação do seu código:

Se você tem uma folha de estilo CSS om 500 linhas facilite a visualização usando formatação.

Exemplos:

Código Corrido

.classname { background: #FFF; border: 0; color: #252525; float: left; margin: 0; padding: 0; }

Código formatado:

.classname {
background: #FFF;
border: 0;
color: #252525;
float: left;
margin: 0;
padding: 0;
}

3) Use e abuse dos comentários:

Usando os comentários você pode se localizar e descobrir pra que serve algum bloco de código especifico.
Além disso eles também facilitam a interpretação do código por outras pessoas.
Os comentários sempre começar com /* e terminam com */, dentro desse espaço você pode escrever o que desejar sem interferir na renderização da página, os navegadores ignoram comentários, vale lembrar que muitos comentários tornam o arquivo um pouco maior e o tempo de download do arquivo CSS pode aumentar.

Exemplo de comentário:

/********** CÓDIGO DO CABEÇALHO AQUI **********/

4) Uma Regra = Uma linha … Múltiplas regras = Múltiplas linhas

Algumas pessoas preferem sempre código corrido mas eu sugiro que vocês sigam essa regra que diminui algumas linhas de código:

.classname { border: 0; }

.classname {
background: #FFF;
border: 0;
color: #252525;
float: left;
margin: 0;
padding: 0;
}

5) Mantenha seu código consistente.

Não mude de formatação no meio do código. Se você começou uma formatação siga da mesma forma até o final.

Evite também inserir código desnecessário, exemplo:

h1{
font-family:Verdana, Geneva, sans-serif;
font-size: 14px;
}

.titulo{
font-family:Verdana, Geneva, sans-serif;
font-size: 14px;
}

Nesse caso você poderia ter retirado a classe titulo e substitui-la por H1 em seu HTML

6) Separe hacks de seu código CSS

Sei que existem web designer que vão me xingar até não terem mais voz ou ainda aqueles que dizem “Se o usuário não atualiza seu browser, vá para o inferno com ele” mas dependendo do publico alvo e situação os navegadores antigos devem ser considerados (entende-se “Internet Explorer 6″).

Embora na maioria das vezes seja possível evitar hacks você pode achar algo que realmente lhe obrigue a usa-los, e nesse caso eu não recomendo que eles estejam na mesma folha de estilo.

Tente sempre criar uma folha de estilo separada com seus hacks e cole um condicional em seu código HTML.

Exemplo:

link rel="stylesheet" type="text/css" href="/css/style.css" media="screen, projection"
!--[if lt IE 8]
link rel="stylesheet" type="text/css" href="/css/ie.css" media="screen"
![endif]--
link rel="stylesheet" type="text/css" href="/css/print.css" media="print"

Nesse caso o código informa que deve ser usada a folha de estilo chamada “ie.css” caso o usuario esteja usando uma versão abaixo do Internet Explorer 8.

7) Estude e use shorthand code (código curto):

O shorthand code permite uma significante diminuição do código css usando a logica top – left – bottom – right.

Exemplo de código longo:

.classname {
margin-left: 1px;
margin-right: 2px;
margin-bottom: 4px;
margin-top: 1px;
}

Exemplo de shorthand code:

.classname { margin: 1px 2px 4px 1px; }

Viu? então não perca tempo escrevendo enormes linhas e use o shorthand code a partir de agora, alem de fácil, diminui muitas linhas e alguns KB de seu código.

8) Crie uma tabela de classificação de elementos

Crie sempre uma padronização de elementos em seu código, ou seja crie sessões onde você coloca código especifico para cada região de seu HTML, separe por header, corpo, footer, etc e abaixo de cada seus códigos relacionados, alem disso defina essas áreas no começo de seu arquivo CSS pois quem for editar entenderá sua hierarquia.

Exemplo:

/*****************************************************
1. HEADER code
2. NAVIGATION code
3. CONTENT code
4. SIDEBAR code
5. FOOTER code
*****************************************************/

9) Nomeie suas classes com nomes de fácil interpretação

Não ha nada pior do que tentar descobrir o que esse ou aquele código css faz:

Exemplo de difícil interpretação:

.linhacurva{ ... }
.box1 { ... }
#tabela6 { ... }

Exemplo de fácil interpretação:

.corpo{ ... }
.rodape { ... }
#tabela-produtos { ... }

10) Coloque suas regras css em ordem alfabética:

Essa é uma dica que eu não conhecia e que vou passar a seguir afinal a ordem alfabética pode facilitar muito a localização de regras dentro de seu código css.

.classname {
border: 1px solid #dedede;
color: #000;
font-size: 18px;
line-height: 24px;
margin: 48px;
padding: 0;
position: relative;
z-index: 101;
}

É isso!

Pode parecer muita coisa mas na verdade quando você se acostuma a seguir essas dicas elas se tornam automáticas e a qualidade de seu código, seu tempo e seu trabalho melhoram.
Essa postagem usou como base esse link (em inglês)