CSS Orientado a Objetos: Um CSS Mais Eficiente e Sem Repetições

Tempo de leitura: 8 minutos

Olá desenvolvedor, preparado para mais um artigo épico sobre CSS?

Depois de falarmos detalhadamente sobre Pré-processadores CSS, hoje iremos tratar de um assunto não muito comentado, mas de real importância para o nosso desenvolvimento como desenvolvedores, que é o CSS orientado a objetos.

Sabemos que têm muitos desenvolvedores que desenvolvem as duas artes do desenvolvimento web, que é o Front-end e o Back-End, também são conhecidos como desenvolvedores Full Stack, mas o mais comum é que se escolha uma das áreas para atuar e seguir carreira.

Mas, mesmo que você não tenha entrado para o universo do Back-end, acredito que pelo menos já deve ter ouvido falar em orientação a objetos.

O CSS orientado a objetos veio para simplificar o máximo possível e o objetivo principal é evitar repetição de código e consequentemente, facilitar a manutenção e expansão, por meio de várias técnicas.

Como tudo começou?

como tudo começou

Nicole Sullivan (ex-Yahoo!), em 2009, depois de comprovar a eficiência do método, a desenvolvedora teve a ideia de trazer o site para front-end para que o objetivo principal também pudesse ser almejado em CSS.

Dessa forma surgiu o CSS orientado a Objetos, que na verdade era chamado por ela de Object Oriented CSS (OOCSS), claro, ela falava inglês rs.

Se você der uma olhada nos últimos códigos que você escreveu irá perceber que há muita repetição desnecessária de propriedades.

Inúmeras declarações para definir fontes, espaçamentos e posicionamentos repetidos, estou certo?

Mas calma, não precisa você contar; é apenas para enfatizar que isso é muito comum de acontecer.

E com isso, alguns problemas de médio prazo acabam surgindo atrapalhando o andamento de qualquer projeto.

A notícia boa disso tudo é que existe uma cura chamada: CSS orientado a objetos.

Quais problemas o CSS orientado a Objetos resolve?

quais problemas o css orientado a objetos resolve

Para que não fique nenhum mal-entendido, não se trata de modificar a sintaxe do CSS ou fazer a instalação de algum pacote mágico para fazer isso.

CSS orientado a objetos é algo criado para projetos mais profissionais e pode até ser considerado como um framework, já que se trata de uma estrutura que você desenvolve.

E ele pretende resolver alguns problemas clássicos do CSS, como:

  • A dificuldade de tocar projetos mais complexos de médio e grande porte.
  • O tamanho dos arquivos CSS fica cada vez maior a medida que o projeto evolui.
  • Reutilizar código quase inexistentes.
  • Códigos frágeis (até o melhor código se perde quando alguém não muito experiente mexe nele)

Segundo a Sullivan, as soluções que surgem por meio da utilização de OOCSS são várias, tornando o seu CSS:

  • Leve
  • Veloz, pois faz poucas requisições HTTP.
  • Simplificado e acessível.
  • Fácil manutenção, padronizado e semântico.
  • Modular, devido ser reusável e extensível.

Fundamentos do CSS orientado a objetos

fundamentos do css orientado a objetos

Os princípios mais importantes dentro da proposta de OOCSS são:

  • Separar a estrutura e skin.
  • Separar o contêiner e conteúdo.

O que significa separar a estrutura e skin?

Significa ter de repetir características visuais como “skins” separadas, que podem ser perfeitamente combinadas em vários “objetos” para se conseguir uma extensa gama de variações visuais sem muito código.

Um exemplo disso são os backgrounds e estilos de borda.

A diretriz também pode significar a utilização de classes para nomear os objetos e componentes, em vez de confiar apenas na semântica HTML.

Por exemplo, um objeto de mídia com class=”media” e seus componentes com class=”img” (para componentes de imagem e vídeo) e class=”bd” (para componentes de texto).

Ao fazer referências para estas classes na folha de estilo, o HTML ganha uma flexibilidade a mais, ou seja, se um novo elemento de mídia surgir nos próximos anos (como <svg>), ele pode receber a estilização sem que seja necessário mexer uma linha de CSS!

O que significa separar a contêiner e conteúdo?

Na essência significa que você raramente irá utilizar estilos que dependam de localização.

Idealmente, um objeto deve se parecer igual, independente de onde ele estiver na página, ou até mesmo se trocar de página.

Em vez de você estilizar um título secundário específico com .myObject h2 { }, crie e faça a aplicação de uma classe que descreva o elemento em questão, como <h2 class=”category-title”>

Isso irá garantir que:

  • Todos os <h2> sem a classe não sejam afetados inadvertidamente.
  • Todos os <h2> com a classe tenham o mesmo estilo.
  • Não é necessário criar estilos extras nos casos em que seja necessário que um .myObject se pareça com um <h2> não estilizado.

O que é o objeto em OOCSS?

O que é o objeto em OOCSS

Um objeto em CSS é análogo a uma instância de uma classe Java ou PHP, por exemplo.

Um objeto CSS é formado por 4 elementos:

  • HTML, que pode ser mais de 1 nó do DOM.
  • Declaração CSS, que estilizam os nós, iniciando com o nome da classe referente ao wrapper.
  • Comportamentos JavaScript, listeners ou métodos associados.

Isso pode parecer um pouco confuso porque cada classe CSS não é um objeto necessariamente, mas pode perfeitamente ser uma propriedade de uma classe wrapper.

Como por exemplo:

<div class="mod">
<div class="inner">
<div class="hd">Bloco Head</div>
<div class="bd">Bloco Body</div>
<div class="ft">Bloco Foot</div>
</div>
</div>

O objeto é um módulo, que foi indicado pela classe mod. E possui 4 nós- propriedades (que não podem existir sem o módulo), que inclui 2 regiões obrigatórias (inner e bd) e 2 regiões que são opcionais (hd e ft).

OOCSS e alta performance

O benefício da alta performance é duplo:

  • Menos repaints e reflows.
  • Intensa reutilização de código: Que significa uma quantidade menor de código CSS, arquivos menores e transferências mais velozes.

Exemplos de objetos

Exemplos de objetos

Existem vários tipos de objetos em OOCSS. Vamos ver o exemplo de alguns deles para aprendermos os conceitos e aliar toda essa teoria à prática.

Media

Esse objeto permite que você tenha uma imagem (ou flash) ou outro tipo de mídia com tamanho fixo à esquerda ou direita com algum conteúdo que a descreva no centro.

Classes

  • .media: wrapper do objeto Media;
  • .img: nó-filho do objeto Media, geralmente é um link ou uma imagem, aparecendo à esquerda do nó .bd (consta no objeto de forma opcional)
  • .bd: essa é a área principal de conteúdo do objeto Media, pode conter quaisquer outros objetos (é obrigatório constar no objeto)
  • .imgExt: nó filho do objeto Media, geralmente é um link ou imagem, aparecendo à direito do nó .bd (consta no objeto de forma opcional)

HTML

<div class=”media”>
<a href=”http://twitter.com/stubbornella” class=”img”>
<img src=”http://a3.twimg.com/image.jpg” alt=”Stubbornella”></a>
<div class=”bd”>
<a href=”http://twitter.com/stubbornella”> @Stubbornella </a>
<span class=”detail”>14 minutos atrás</span>
</div>
</div>

Data Table

O objeto Data Table se destina a formatar uma tabela corretamente para determinados tipos de dados.

Classes

• .data: wrapper do Data Table;
• .txtL: alinha à esquerda, sendo o padrão (aplicável em table, tr,
td ou th);
• .txtR: alinha à direita (aplicável em table, tr, td ou th);
• .txtC: alinha ao centro horizontal (aplicável em table, tr, td ou
th);
• .txtT: alinha ao topo (aplicável em table, tr, td ou th);

  • .txtB: alinha ao fundo (aplicável em table, tr, td ou th);
    • .txtM: alinha ao centro vertical (aplicável em table, tr, td ou th).

HTML

<div class=”data”>
<table class=”txtC”><!– alinhamento da tabela ao centro –>
<tr class=”odd txtL”>
<th scope=”row” class=”txtR”>
Alinhado à direita
</th>
<td>Alinhado à esquerda</td>
</tr>
<tr class=”even”>
<th scope=”row”>Alinhado ao centro</th>
<td>Alinhado ao centro</td>
</tr>
</table>
</div>

Conclusão de CSS orientado a objetos

conclusão de css orientado a objetos

O que achou do nosso artigo sobre CSS orientado a objetos? Interessante hein?

Saiba que existem bem mais objetos, porém, esses exemplos foram criados somente para se ver algo aplicado na prática.

Em seu repositório oficial é possível nós encontrarmos tudo sobre OOCSS.

Contudo para você conseguir mexer com segurança, você irá precisar conhecer um pouco sobre pré-processadores CSS, que foi assunto de um artigo anterior.

Tudo bem até aqui? Qualquer dúvida, deixe seu comentário, terei o prazer de responder o mais breve possível.