Blog.

OOCSS

Cover Image for OOCSS

Como você dimensiona CSS para milhares de páginas? CSS orientado a objetos é uma resposta. É uma abordagem para escrever CSS rápida, sustentável e baseada em padrões. Ele adiciona a previsibilidade necessária ao CSS para que até mesmo os iniciantes possam participar da criação de belos sites.

O que é um CSS Object?

Basicamente, um “objeto” CSS é um padrão visual repetitivo, que pode ser abstraído em um fragmento independente de HTML, CSS e possivelmente JavaScript. Esse objeto pode então ser reutilizado em todo o site.

Vamos imaginar que temos o seguinte caso para uma estrutura HTML e CSS

<button class="buttonred">Lorem ipsum</button>
<button class="buttonblue">Lorem ipsum</button>
<button class="buttongreen">Lorem ipsum</button>
.buttonred {
  background: red;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  outline: 1px solid #ccc;
}

.buttonblue {
  background: blue;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  outline: 1px solid #ccc;
}

.buttongreen {
  background: green;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  outline: 1px solid #ccc;
}

Como podemos notar temos muita repetição de propriedades em nosso CSS e isso é ruim. Para resolver este problema podemos usar a metodologia OOCSS para separar alguns "objetos", o primeiro objeto que podemos extrair é o nosso "botão" e adicionar novas variantes do nosso botão que serão vermelhas, azuis e verdes.

<button class="button button-red">Lorem ipsum</button>
<button class="button button-blue">Lorem ipsum</button>
<button class="button button-green">Lorem ipsum</button>
.button {
  border-radius: 6px;
  padding: 0.5rem 1rem;
  outline: 1px solid #ccc;
}

.button-red {
  background: red;
}

.button-blue {
  background: blue;
}

.button-green {
  background: green;
}

Depois dessa mudança, nosso CSS e HTML se tornam mais legíveis e fáceis de manter, o que é bom porque agora podemos aplicar os estilos em um único seletor, por exemplo, .button e temos todas as instâncias de seu objeto recebendo esta nova propriedade.

Dois Princípios do OOCSS

Estrutura e 'skin' separadas

Isso significa definir recursos visuais repetitivos (como estilos de fundo e borda) como "skins" separados que você pode misturar e combinar com seus vários objetos para obter uma grande variedade visual sem muito código.

Por exemplo, o código a seguir possui três estruturas que aplicam a mesma 'skin'.

#widget {
  width: 250px;
  height: 250px;
  padding: 10px;
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 5px;
}

#box {
  width: 350px;
  overflow: hidden;
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 5px;
}

#content {
  width: 1200px;
  margin-left: auto;
  margin-right: auto;
  overflow: auto;
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 5px;
}

O que podemos fazer é separar essa capa e, em vez de usar IDs para definir o estilo, começar a usar classes para se tornar mais flexível e combinável.

.widget {
  width: 250px;
  height: 250px;
  padding: 10px;
}

.box {
  width: 350px;
  overflow: hidden;
}

.content {
  width: 1200px;
  margin-left: auto;
  margin-right: auto;
  overflow: auto;
}

.skin {
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 5px;
}

mais tarde em nosso HTML

<div class="box skin"></div>

Separate container and content

Essencialmente, isso significa "raramente use estilos dependentes de localização". Um objeto deve ter a mesma aparência, não importa onde você o coloque. Então, em vez de fazer isso:

<aside>
  <h2>Title<</h2>
</aside>
aside h2 {
  font-size: 2.75rem;
  color: #ddd;
}

Crie e aplique uma classe que descreva o <h2> em questão, como:

<aside>
  <h2 class="aside-title">Title<</h2>
</aside>
.aside-title {
  font-size: 2.75rem;
  color: #ddd;
}

Isso te dá a garantia de que:

  1. Todos os <h2> não classificados terão a mesma aparência;
  2. Todos os elementos com a classe .aside-title (chamada de mixin) terão a mesma aparência;
  3. Você não precisará criar um estilo de sobreposição para o caso quando realmente deseja que aparte h2 se pareça com o<h2>normal.

Consideração final

Então é isso, como podemos ver, o OOCSS é muito simples de aplicar e relativamente bom para nos ajudar a organizar nossos arquivos CSS e estrutura. Se você quiser saber mais sobre OOCSS, verifique o projeto de repositório.