Uma coisa que eu costumava fazer bastante há alguns anos atrás era subestimar o meu código CSS. Sempre começava a escrever achando que ia ser uma coisa pequena e simples, e aí quando me dava conta eu tinha um código de centenas de linhas, confuso, e impossível de achar alguma coisa sem Ctrl + F.

Então eu desenvolvi 5 regrinhas que ajudaram meu CSS a ficar mais organizado, e mais fácil de mexer.

1- Usar um CSS Reset

CSS Reset é como tomar uma droga bem forte. Quem nunca usou acha que não é algo útil, ou até ruim. Mas depois que você experimenta não quer mais voltar atrás e ainda tenta convencer os outros a usarem também.

Apesar dos navegadores terem um ótimo suporte ao CSS, muitos deles tem padrões diferentes. Se você não definiu uma coisa, ela é exibida com o padrão do navegador, e isso pode fazer o seu site ficar com caras diferentes de acordo com o navegador do usuário.

O CSS Reset pega uma grande parte dos elementos visuais e padroniza eles, geralmente zerando ou definindo um novo padrão. Ele tira as bordas, as margens, os paddings, padroniza o tamanho da fonte, etc. A partir daí, você sabe que as coisas vão ficar mais certinhas em todos os navegadores e não vai ter nenhuma surpresa desagradável.

Recomendo Eric Meyer Reset, ou o fantástico YUI Reset.

2- Colocar em ordem alfabética

Sabe quando você tem aquele elemento no CSS que tem uns 12 parâmetros ou mais? Aí você precisa editar a margem, passa o olho rápido pela lista de parâmetros e não encontra. Cadê a margem que estava aqui? Tá ali bem na sua frente, mas tem que olhar umas 3 vezes pra achar. É um saco.

Eu passei então a organizar meus parâmetros do CSS em ordem alfabética, e fez uma grande diferença. Eu sempre sei que a border vai estar perto do começo, e que a margin vai estar ali perto do meio, perto do padding.

3- Separar os trechos de códigos em categorias

Quando o CSS fica realmente grande, o jeito mais fácil de organizar o código é usando comentários pra criar uma separação visual.

/* ------------------------------------------- */
/* ---------- MENU LATERAL ------------------- */
/* ------------------------------------------- */
elemento {
    color: #000;
    background: #FFF;
    outros códigos...
}
elemento a {...}
elemento img {...}

/* ------------------------------------------- */
/* ---------- RODAPÉ ------------------------- */
/* ------------------------------------------- */

div#footer {...}
div img {...}

Fica ainda mais organizado se as categorias estiverem numa ordem lógica, indo dos elementos mais genéricos pros mais específicos.

4- Colocar seu esquema de cores como comentário  no topo

Geralmente no site você tem umas poucas cores selecionadas pra usar. O que acontecia muito comigo era toda hora ter que parar pra procurar qual era mesmo o código daquele azul do título, ou o código do vermelho da borda do rodapé.

Uma solução simples passou a me poupar muito tempo.

Eu passei a colocar um comentário no topo do CSS, indicando os códigos das cores do meu site.

/* ---------- CORES ------------------------- */
/*
    Azul Claro: #A8EFEE;
    Marrom Escuro: #473B38;
    Rosa Clodovil: #FF4095;
    Amarelo Urina: #F2D843;
*/

5 – Não usar o parâmetro important!

O CSS tem o recurso important! que serve para definir uma regra como prioridade máxima, insubstituível. E isso atrapalha demais. Se você definiu, por exemplo, a cor da fonte como !important, não tem nada que você possa fazer no CSS pra definir outra cor de fonte. Na verdade, nem por javascript você conseguirá mudar a cor da fonte. O important! sempre tem prioridade máxima.

Acontece que no fim das contas isso sempre acaba atrapalhando no futuro. Mesmo que a versão inicial do layout saia legal, mais cedo ou mais tarde você vai precisar editar o seu site e aquele important! perdido lá vai te dar dor de cabeça.

Se você usou esse recurso no seu CSS, é porque algo não está certo. Dá pra organizar todo o seu site sem ter que usar isso, e é bom se planejar para isso desde o começo.

Usar !important no CSS é como casar com mulher promíscua. Você pode não ter tido nenhum problema até agora, mas é só questão de tempo.

Leia também:

1. Cada um no seu quadrado
2. Use a Cabeça! (Head First) HTML com CSS & XHTML

Sobre o autor

Leonardo Bighi é Analista de Sistemas e trabalha com PHP há alguns anos. Também é apaixonado por Ruby On Rails e questões de Usabilidade. Autodidata, aprendeu a programar sozinho antes mesmo de entrar na faculdade.
Leonardo Bighi escreveu 7 posts.