Não quero falar apenas como “melhorar” o seu código.

Muitos já escreveram sobre, e você já deve estar cansado de ouvir as mesmas coisas:

-> Use algum CSS reset;

-> Ordem alfabética (?) [eu prefiro ordenar por ‘tipo’];

-> Use regras resumidas(agrupamento): margin-top: 10px; margin-bottom: 5px;.. seria melhor: margin: 10px 0 5px;

-> Comente para organizar;

-> Identar elementos encaixados (?) [particularmente não sou muito fãn disso] [fonte]

-> Dividir de forma lógica, algo como: estrutura, classes utilitárias, módulos…

-> Um único padrão de nomenclatura [camelCase, dash-case, underscore, ou…] (seja consistente);

-> Escolha bons nomes; (meu post anterior fala um pouco sobre isso)

-> Uma Regra = Uma linha … Múltiplas regras = Múltiplas linhas; [fonte]

-> Indice [um comentário no início mostrando os grupos de seletores que vc usou];

-> Mais de uma folha de estilos [se o site for “grande” isso vale a pena] [fonte]

E outras tantas parecidas, derivadas, e com nomes diferentes dessas acima.

Quero falar sobre o mau cheiro. Sobre quando é que o seu código deve lhe parecer “estranho”, “incorreto” apesar de funcionar.

Afinal é necessário identificar que algo está errado para poder corrigir

Quando você notar duplicação de código:

Por exemplo, você possui uma área parecida com isto:

#box_telefone {
   background: #fff; border-radius: 10px;
   float: left;
   width: 100px; height: 50px;
}
#box_email {
   background: #fff; border-radius: 10px;
   float: left;
   width: 200px; height: 75px;
   margin: 20px;
   color: #ddd;
}

Ambos são “caixas” no layout, e possui estilos(formatações básicas) semelhantes. Eu sugiro fazer algo assim:

.box { background: #fff; border-radius: 10px; }
.fleft { float: left; }
#box_telefone {
   width: 100px; height: 50px;
}
#box_email {
   width: 200px; height: 75px;
   margin: 20px;
   color: #ddd;
}

Note que também retirei o float dos seletores, e fiz uma “classe utilitária” para ele.

Dessa forma posso sei lá, usar o #box_telefone na esquerda na home, e na direita na página de contato.

Existem técnicas e “boas horas” para separar, vá com cuidado.

Quando tiver muitos seletores com vírgulas

Algo assim:

#box_telefone,
#box_email { /* .. */ }

Isso “tende” a crescer. Tende a sair do controle. Então se você precisar de mais uma caixa com estilos parecidos, vai lá e adiciona outro seletor com vírgula ai.

Nesse caso, aplique a dica de cima. Vale mais a pena criar classes “modulares”, do que ir listando IDs para um mesmo conjunto de regras.

Quando a cascata CSS não estiver sendo utilizada

Um outra forma de evitar duplicação de código css, é aproveitar bem a cascata css. Coisas como: definir o font-family para o seletor body, que então os demais elementos herdarão dele.

Mas não definir tag por tag, pois quando você precisar sobrescrever, ficará brigando por especificidade.

Use a cascata, porém tente ser genérico. Bem pouco específico, ou nada(se não, não é cascata).

Quando um efeito/posicionamento estiver lhe dando muito trabalho

Se você entender corretamente o boxmodel, e souber utilizar todas as propriedades css, conhecendo tudo o que elas fazem(de acordo com as especificações), então aquele posicionamento que está te dando mais trabalho, te fazendo usar 10-15 regras, pode estar errado.

É bem sutil isso. Mas existem várias formas de se fazer uma mesma coisa.

Se você começar a fazer uma que não está dando certo, e for ficando cada vez mais complexo, então repense e tente fazer de outra forma.

Às vezes basta mudar um pouco o outro elemento que estava antes na marcação, ou posicionar de uma outra maneira este problemático, e tudo se resolve.

Posso dizer que quanto mais complicado ficar a sua estratégia para resolver, mais chances você tem de encontrar incompatibilidade entre os browsers.

A minha regra aqui é:

Deve primeiro fazer sentido para você mesmo.

Digo isso, pois muitos desenvolvedores saem jogando propriedades, “até dar certo”. Na base do chute. Não é assim que se desenvolve “bem”.

Consigo me lembrar destas por hora. Conhece mais alguma forma ?

Me conte nos comentários.