Mau cheiro em código css – Como sentir

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.

4 Comments

  1. Muito Boa as dicas, uma outra que nao cheguei a ver ai, CSS Organizado, vamos supor que vc tem a div #topo,#conteudo que fica na esquerda e #parceiros na direita e por ultimo #rodape, colocar na mesma ordem que está no html, ou seja, #topo {} #conteudo {} #parceiros {} e por ultimo #rodape {}

    Isso ajuda e muito a se localizar no arquivo css, quando vc quiser alterar o rodape por exemplo, nao importa se teu css vai ter 1k linhas, vc sabe que o rodape vai ta lá no finalzinho, #fikdik 😀

  2. Complementando o que o NetBoy disse, eu particularmente utilizo coments para dividir as seções de classes da estrutura do site que estou desenvolvendo.

    /* TOPO */
    … tudo sobre o topo
    /* FORMULARIOS */
    tudo sobre os forms

    etc..

    Ajuda muito tbm na hora de alguma retificação, mudança, etc…

  3. Tiago de Souza

    julho 1, 2012 at 14:58

    Falam tanto por aí em evitar comentários em JS, o mesmo não vale para a CSS?

Deixe uma resposta

Your email address will not be published.

*