Mau cheiro em código CSS – como sentir

Não quero falar apenas sobre como “melhorar” o seu código. Muitos já escreveram sobre isso, 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ã 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 artigo anterior fala um pouco sobre isso);
• Uma Regra = Uma linha … Múltiplas regras = Múltiplas linhas; [fonte];
• Índice [um comentário no início mostrando os grupos de seletores que você 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 possuem 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 aí.

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 (senã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 o problemático, e tudo se resolve.

Posso dizer que, quanto mais complicada 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 dessas por hora. Conhece mais alguma forma?

Me conte nos comentários.