É muito comum e normal darmos por nós a pensar como é que os nossos ficheiros CSS acabaram por ficar uma salganhada tão grande.

Às vezes é devido a uma programação desorganizada desde o início, outras é devido aos diversos “hacks” e “tweaks” que nos vemos obrigados a realizar nos CSS’s para que o resultado final seja cross browser sem haver diferenças de maior no layout ou mesmo que o layout não fique “partido” ou desalinhado.

Seja qual for a causa… não tem de ser assim !
Escrever CSS limpo e fácil de gerir torna-se muito mais simples quando começamos com o pé direito em vez de começar com o “pé que está mais à mão”, aqui estão 11 dicas para manter o seu código super-limpo e fácil de gerir e alterar no futuro.

1. Mantenha-se organizado !

Tal como em tudo na vida, compensa mantermo-nos organizados ao invés de ir encaixando id’s e classes à medida que nos vão vindo à cabeça… mantenha uma estrutura coerente.
Vai ajudá-lo  a manter a parte do “cascading” do CSS (Cascading Style Sheet) em mente e mantém os seus estilos aptos a tirar vantágem da herança de estilos em vez de repetir estilos desnecessáriamente.

Declare your most generic items first, then the not-so-generic and so on. This lets your CSS properly inherit attributes and makes it much easier for you to override a specific style when you need to. You’ll be faster at editing your CSS later because it will follow an easy to read, logical structure.

Use a estrutura que melhor funciona para si mantendo em mente edições futuras aos estilos e a possibilidade de outro developer ter de pegar no projecto.

• Hacks e Tweaks
• Links e Fonts de texto
• Layout Principal
• Estruturas Secundárias do Layout
• Elementos de Formulários
• Outros Elementos Genéricos

2. Título, Data e Assinatura

Informe as outras pessoas sobre quem escreveu o seu CSS, quando foi escrito e quem devem contactar se tiverem questões sobre o mesmo.
Isto é especialmente útil quando estamos a desenhar templates ou themes.

Hey… que é aquilo  a falar das cores ? Ao longo do tempo, cheguei à conclusão que adicionar uma simples lista das cores usadas na folha de estilos é muito útil durante o desenvolvimento inicial e quando se estão a fazer ajustes mais para a frente no projecto.

Isto poupa-o de ter de abrir o photoshop ou o fireworks para ir buscar uma cor do design, ou ter de andar à procura da cor certa na folha de estilos… Quando precisar da cor para aquele azul em concreto, basta ir lá acima e copiá-lo.

3. Tenha um arquivo de CSS’s genéricos

Uma vez tendo uma boa estrutura para usar, apague tudo o que não é genérico e guarde esse CSS como template para usar mais tarde noutro projecto.

Pode guardar vários tipos de CSS… um layout de duas colunas, três colunas, um layout de blog,  print, mobile e assim por diante.

Não faz sentido nenhum re-escrever cada um dos seus estilos do inicio especialmente quando está a usar o mesmo tipo de layout e método para cada um.

4. Use nomenclaturas úteis e simples de entender

Pode ver acima que eu baptizei algumas Id’s com o nome col-alpha e col-beta. Porque não chamá-las de col-esquerda e col-direita ? Pense em edições futuras, sempre.

Para o ano pode precisar de redesenhar o seu site e mover essa coluna-esquerda para a direita… não deve precisar de mudar a id na folha de estilos e no HTML só para alterar a sua posição.

Claro que podia só reposicionar a col-esquerda para a direita e deixar a id como #col-esquerda mas é um pouco confuso não acha ? Isto não lhe deixa muita margem de manobra para alterar a posição dos elementos um dia mais tarde.
Uma das principais vantagens de utilizar CSS é a possibilidade de separar os estilos do conteúdo do próprio site.  Assim você pode redesenhar completamente o site sem mexer em mais nada que não o CSS, por isso não torne o CSS confuso no futuro utilizando nomes limitativos. Use nomenclaturas versáteis e mantenha-se consistente.
Deixe posições ou palavras específicas de estilo fora dos seus estilos e id’s.
Uma class .link-azul das duas uma, ou vai dar-lhe mais trabalho ou fazer com que a sua folha de estilos fique muito confusa quando um dia mais tarde o seu cliente pedir para mudar esses links azuis para laranja.

Nomeie os seus elementos baseado no que eles são e não no seu aspecto. Por exemplo, .comentario-verde é muito menos versátil que .comentario-B, e .fonte-grande é muito mais limitativo que .titulo-artigo .

5. Hifens e Underscores

Browsers mais antigos têm a tendência a baralharem-se com underscores no CSS, ou simplesmente não o suportam.
Para uma melhor compatibilidade cross-browser, comece a habituar-se a user hifens ao invés de underscores
Utilize #col-alpfa em vez de #col_alpha.

6. Não se repita

Reutilize atributos sempre que possível agrupando elementos em vez de atribuir os mesmo estilos.
Se o seu h1 e h2 utilizam o mesmo tamanho de font, cor e margens, agrupe-os utilizando uma vírgula.

Isto:

Deve fazer uso de atalhos sempre que possível. Esteja sempre atento a oportunidades de agrupar elementos e usar atalhos de estilos.

Pode conseguir tudo isto:

Com apenas isto:

É muito importante que compreenda a ordem pela qual o CSS intrepreta estes atalhos: Topo, Direita, Baixo, Esquerda. Um grande círculo no sentido dos ponteiros do relógio que começa no meio-dia.
Também, se os seus atributos para o Topo e Baixo ou Esquerda e Direita são os mesmos só precisa de utilizar dois:

Isto define as margens de Topo e Baixo a 1em, e a esquerda e direita a 0.

7. Optimize para folhas de estilos Peso-Pluma

Utilizando as dicas acima  vai poder cortar bastante no peso da sua folha de estilos. Uma folha de estilos mais leve significa tempo de loading menor e mais leve significa também maior facilidade de manter e actualizar.

Corte no que não precisa e consolide onde possível agrupando.
Tenha cuidado quando usar frameworks de CSS’s adaptadas, a probabilidade de herdar uma data de porcarias que não vão ser precisas é bastante elevada.

Outra dica rápida para CSS mais leves: não precisa de especificar uma unidade de medida quando utilizar 0.
Se uma margem está definida como 0, não precisa de dizer 0px ou 0em. Zero é zero independentemente da unidade de medida, e o CSS entende isso.

8. Escreva a sua base para Gecko,depois adapte para Webkit ou IE

Poupe uma data de dores de cabeça e escreva o seu CSS para browsers Gecko (Firefox, Mozilla, Netscape, Flock, Camino).
Se o seu CSS funciona como deve ser em Gecko, é muito mais provável não ter qualquer problema em Webkit (Safari, Chrome) e no Internet Explorer.

9. Valide o seu CSS

Faça uso da Ferramenta de Validação de CSS da W3C.
Se está preso e o seu layout não está a fazer o que quer que faça, o Validator de CSS da W3C  é uma ferramenta muito útil a apontar erros na folha de estilos.

10.  Mantenha a casa arrumada !

Separe os CSS específicos para um determinado browser para uma folha individual e inclua como for necessário com javascript, código server-side ou  Comentários condicionais. Use este método para evitar hacks esquisitos na sua folha de estilos principal.
Isto vai manter a sua folha de estilos base limpa e fácil de entender e editar.