Eu já havia dado algumas dicas de como sentir mau cheiro em código CSS. Veja mais alguns outros pontos importantes em que você deve ficar de olho.

Interprete esses “maus cheiros” como algo que pode (provavelmente) estar errado. Que potencialmente irá lhe causar uma incompatibilidade entre os browsers. Não são regras e nem sempre lhe causarão problemas. Mesmo assim, vale a pena prestar atenção nas situações que vou expor.

Não economize declaração de seletores

Às vezes, a preguiça de colocar mais uma classe num elemento ou até mesmo um ID – se for o caso -, pode nos levar a usar erroneamente seletores descendentes. Na maioria das vezes, é melhor declarar uma class extra, do que usar:

#content h3 {}

Basta imaginar que agora o que era um h3, será alterado para um h2, com o mesmo estilo.

Ou então, que eu tenha algum outro h3 que deva receber uma estilização diferente dos demais.
Essa excessão terá que sobrescrever diversas propriedades herdadas desnecessariamente da regra anterior.

Como usar float

A propriedade float, flutua elementos para um dos lados(left|right), retirando este elemento do fluxo do documento, e fazendo com que o próximo na marcação html, ocupe o lugar que ele deixou vazio. Esvaziando, assim, o container. É um erro comum declarar um float: left; para o elemento pai. Assim, “visualmente” ele volta a ganhar a altura que havia perdido por ter os seus filhos todos com float.

Note que isso é um  erro grave. Pois se a propriedade existe para jogar um elemento para um lado, e assim colocar alguma outra coisa do outro lado. Então, que sentido faz flutuar um elemento que ocupa 100% da largura? Pois é, nenhum. Não faça isso.

Um display: table ou uma altura fixa no container, ou até mesmo um elemento vazio logo antes do fechamento dele, com um clear: both; são as maneiras corretas, de lidar com este efeito colateral do float.

De quem é a margem?

Margens em CSS são “espaçamentos” externos aos elementos; tente enxergar dessa forma. Que elemento está empurrando quem? Geralmente é o da esquerda. Então, este é quem deve ter uma margin-right para que o elemento da direita se afaste dele.

Se forem apenas duas colunas, mais fácil colocar float: left em um, e float: right no outro, do que usar left nos dois, e usar margin-right no primeiro.

O que é padding?

Os paddings são espaçamentos internos ao elemento. Uma boa dica é quando todo um conjunto de elementos de um box precisar se afastar uma mesma medida da borda do seu container. Aí temos um caso para usar padding e não margin.

Valores gigantes?

Se você tem uma área útil de 960px de largura, e algum elemento com 300px ou mais de margin ou padding laterais, ou um left dessa magnitude, tome cuidado! Pense bem, se você desloca um bloco 300px para a esquerda, então ele está, na verdade, na direita. Logo, não era mais simples colocar ele na direita com um float: right; ou right: 0; do que ficar empurrando até chegar lá? Pense nisso. Revise suas implementações.

Tome cuidado com seletores genéricos

CSS é o acronimo para Cascate Style Sheet. Mas nem sempre nos damos conta do que realmente é a cascata. Um seletor do tipo: p{}, é genérico por demais.

Tome cuidado com declarações do tipo:

p {
    line-height: 16px;
    font-size: 12px;
}

Aí, se você tiver algum parágrafo com font-size maior ou menor que 12px, logicamente esse valor de line-height não ficará bom. Nessa situação em específico, eu indico usar na unidade em.

p {
    line-height: 1.3em;
    font-size: 12px;
}

O problema, na verdade, são as propriedades CSS declaradas em seletores genéricos (de baixa especificidade) que acabam engessando e travando a sua implementação.

Estas são algumas das coisas que vemos todos dias e podemos nos acostumar a observar elas. Sentir um mau cheiro no código CSS te fará economizar tempo de implementação.