OOCSS (Object-Oriented CSS)

O OOCSS (Object-Oriented CSS) é uma abordagem diferente introduzida pela Yahoo! em 2008, que traz os princípios da orientação a objetos para o desenvolvimento de CSS. Promovendo a reutilização de código, a separação de responsabilidades e a criação de componentes escaláveis, o OOCSS facilita a construção de estilos mais limpos, modulares e fáceis de manter. Neste artigo, vamos explorar o conceito de OOCSS, seus benefícios e como aplicá-lo na prática para transformar a forma como você escreve CSS.

Além disso, aqui no blog temos diversos artigos sobre desenvolvimento, arquitetura de software e afins. É possível que te interesse ler também As 10 leis da usabilidade, Acessibilidade Web, CSS para o BEM e SMACSS.

O padrão OOCSS (Object-Oriented CSS)

O padrão OOCSS foi inventado pela Yahoo! em 2008, com a ideia de padronizar a forma de se criar CSS’s inspirado em Orientação a Objetos. Essencialmente ao ver códigos em CSS que replicavam estruturas inteiras e complicavam a manutenção, pensaram: porque não prezar por responsabilidade única e separação de responsabilidades no CSS?

Pois bem, o OOCSS aprofunda essa questão em seu site oficial http://oocss.org/. Ele considera que os códigos CSS gerem os seguintes benefícios:

• Códigos mais enxutos
• Aumento da reutilização
• Escalabilidade de componentes
• Manutenibilidade

OOCSS na prática

Vamos com um exemplo ruim e, após, aplicaremos algumas melhorias gradativas para esclarecer na prática o seu uso. Considere, para começar, o seguinte CSS simples.

.botao-cinza, {
    padding: 10px 20px;
    border: 1px solid #333;
    border-radius: 5px;
    display: inline-block;
    text-decoration: none;
    color: #fff;
    background-color: #333;
}

.botao-azul {
    padding: 10px 20px;
    border: 1px solid #333;
    border-radius: 5px;
    display: inline-block;
    text-decoration: none;
    color: #fff;
    background-color: #007bff;
}

Esse exemplo de código considera botões com estilos bem parecidos mas com alguns detalhes particulares. Note que o uso de IDs são profundamente não recomendados, mas claro que sempre há situações particulares. Para nossos exemplos, vamos trabalhar sempre com classes.

Melhorando esse código: Gerando abstrações

O código a seguir mostra uma pequena melhoria, gerando um senso abstração que gera parte do efeito do OOCSS.

.botao {
    padding: 10px 20px;
    border: 1px solid #333;
    border-radius: 5px;
    display: inline-block;
    text-decoration: none;
    color: #fff;
}

.botao-cinza {
    background-color: #333;
}

.botao-azul{
    background-color: #007bff;
}

Esse exemplo ficou bem mais legal, dando um ar de herança entre essas estruturas. Entretanto ainda há um ponto questionável: alguns elementos são estruturais e outros estilísticos.

Melhorando esse código: Separando os conceitos

Os elementos estruturais e estilísticos devem ser separados, entretanto isso deve ser observado em cada cenário em específico. Para nosso exemplo, vou trazer algumas linhas para os filhos, mas analise seu caso em particular.

.botao {
    padding: 10px 20px;
    border: 1px solid #333;
    border-radius: 5px;
    display: inline-block;
    text-decoration: none;
}

.botao-cinza {
    color: #fff;
    background-color: #333;
}

.botao-azul {
    color: #fff;
    background-color: #007bff;
}

Resumo

Esse formato simples de ser entendido é o OOCSS. Note que podemos trabalhar com heranças com “objetos” que possuem “sub-objetos” aninhados, a depender do que pretende. Note também que é muito simples entender ou até depurar seus estilos quando se trabalha desse modo. Além de tudo isso há uma possibilidade, embora não seja obrigatório, que componentes diferentes fiquem organizados em arquivos CSS diferentes, melhorando sua percepção prática.

Conclusão de OOCSS (Object-Oriented CSS)

Por fim, o OOCSS (Object-Oriented CSS) apresenta uma abordagem estruturada e eficiente para a escrita de estilos CSS, inspirando-se nos princípios da orientação a objetos para promover a reutilização de código e a separação de responsabilidades. Ao adotar essas práticas, desenvolvedores podem criar folhas de estilo mais enxutas, modulares e escaláveis, facilitando a manutenção e evolução de projetos complexos.