Por quê ?

A base da teoria oocss é algo que todos nós depois de alguns layouts recortados já devemos ou deveríamos nos ter deparado e notado: duplicação de estilos.

Uma sensação de dejavu, em que elementos diferentes e não relacionados começam a declarar alguns estilos semelhantes, como cor de fundo, estilo de borda, família ou cor da fonte.. coisas desse tipo.

O Diego Eis escreveu um ótimo artigo sobre isso: OOCSS ou CSS do jeito certo. Então não vou gastar muitas linhas com o motivacional.

Como fazer

Tente pensar em pequenas funcionalidades úteis para seus elementos. A forma de uso é adicionar classes que definam poucos estilos, e assim formar um todo.

<a href="" class="btn btn-hire btn-big">Contratar</a>

Apenas trocando e combinando as classes dos elementos, conseguimos montar um botão com os estilos padrões da classe .btn, da cor que foi padronizada para todos os botões de contrate na classe .btn-hire, e grande, pois é apenas isso que a classe .btn-big faz.

Note que não devemos usar seletores com nomes de tag no nosso css, pois isso trava a implementação, e nos impossibilitaria de, por exemplo, fazer isto:

<input type="submit" class="btn btn-hire btn-big" value="Contratar" />

E do ponto de vista conceitual não é nada absurdo termos um input[type=”submit”] com os mesmos estilos de uma tag <a>, pois o importante é a função do elemento. Os dois levam o visitante a contratar nossos produtos, então precisam ter estilos iguais. E se conseguirmos usar o mesmo css para tal, melhor ainda para nós.

Outro exemplo

Falar de botões é simples, é um dos exemplos mais básicos quando estamos falando sobre css. Mas imagine que existe um padrão de raio em todos as caixas de conteúdo do nosso site. Ter que codificar isso, já que ainda não temos variáveis nativas no css, não é legal.

Se o designer fizer o site com varias caixinhas de 10px de border-radius, e depois pedir para diminuirmos todas as caixas para 7px, sair editando vários elementos é muito chato e nada prático. Para resolver isso, podemos fazer:

.radius { border-radius: 10px; }

E aí sair usando nos elementos que tiverem este estilo:

<section id="comments" class="radius"></section>
<div id="box-call" class="radius"></div>

<span class="text radius"></span>

Isso realmente facilita a manutenção do projeto como um todo.

Evite seletores com vírgulas

Sair colocando vírgulas nos seletores é uma forma de não duplicar linhas do css:

#comments,
#box-call,
.text {
    /**/
}

Mas não é legal para a manutenção do sistema. Se algum outro elemento for utilizar esses estilos desse bloco acima, teríamos que sair procurando onde em nosso css fizemos esses seletores com vírgula, para incluir mais uma vírgula e o novo seletor.

É muito mais interessante fazer a classe .radius, e apenas utilizá-la no html desse novo elemento.

Bom senso

Crie suas classes utilitárias conforme você for precisando delas, não infle o seu projeto com coisas que “talvez” você precise, que “talvez” você vá usar algum dia. Modularize os estilos que realmente forem ser reutilizados.

Sei que incomoda criar “classes funcionais”, aquelas como .link-gray, ou .font16, mas vamos usar o bom senso, galera. Pense bem e só some classes que valem a pena serem somadas.

Não é nada inovador e, como eu disse no começo do artigo, já sabemos fazer isso faz tempo. Ainda assim, é bacana relembrarmos e revermos alguns conceitos, pois devemos sempre buscar melhorar e aperfeiçoar nossas técnicas. Só assim produziremos códigos com mais qualidade e com melhor manutenção.