Introdução ao desenvolvimento de CSS orientado a objetos

Alguns desenvolvedores web já devem ter se perguntado como pode uma linguagem de programação estática que é realmente mais voltada à marcação do estilo dos elementos nas páginas fazer uso de objetos e suas peculiaridades? Neste artigo, vamos conhecer a ideia do CSS orientado a objetos e ver como ele funciona.

CSS orientado a objetos, ou OOCSS, em sua essência é simplesmente escrever estilo de forma mais limpa. Não é uma linguagem diferente e totalmente nova: continuamos a usar o mesmo velho CSS que todos já conhecemos.

É apenas uma “mudança de paradigma”. O que acontece na prática é que, ao usar um CSS orientado a objetos, temos padrões um pouco mais simples e melhores práticas implementadas.

Então por que chamá-lo de orientado a objetos? A programação orientada a objetos (OOP) é um paradigma que usa "objetos" - estruturas de dados que consistem em campos de dados (os datafields) e métodos - e suas interações para projetar aplicações e programas de computador.

Se tivéssemos que dar uma definição final resumida do que é o OOCSS de fato, poderíamos dizer algo como: CSS orientado a objetos é um paradigma de codificação que usa estilos em “objetos” ou “módulos” – pedaços aninháveis de HTML que definem uma seção de uma página da web –robustos e reutilizáveis.

Isso basicamente significa que teremos um objeto padrão (uma estrutura HTML), bem como classes CSS que aplicaremos ao mesmo e que definem o design e o fluxo de como a página será visualizada pelo usuário final. Confuso? Vamos dar uma olhada na teoria disso tudo.

Teoria do OOCSS

Nicole Sullivan, engenheira de software da empresa Pivotal Software Inc., foi a pioneira dessa ideia. Ela basicamente definiu que a base do paradigma se sustenta na separação da estrutura do skin (design base), o que significa que o seu estilo de layout e seu estilo de design devem estar sempre separados.

Uma maneira muito prática de fazer isso é usar um sistema de grids; há várias opções disponíveis através de frameworks que já implementam esse tipo de estrutura por padrão (como Bootstrap, Google MDL, etc.), mas você pode criar o seu próprio se desejar.

Se você não estiver usando um sistema de grids, provavelmente terá apenas de definir a estrutura do objeto principal da sua página; e isso é o que faremos logo mais na parte prática.

Separar o container (recipiente principal) a partir do conteúdo significa que qualquer objeto (o recipiente) deve ser capaz de adaptar-se para aceitar qualquer tipo de conteúdo que seja; por exemplo, não deve ser necessário ter um título de cabeçalho (h1-h6) no topo da página, seguido por uma lista não ordenada para que a aparência do site esteja elegante. Portanto, esse mecanismo permite flexibilidade e capacidade de reutilização, o que é fundamental.

Há algumas boas razões pelas quais devemos escrever CSS de forma orientada a objetos. Um dos maiores benefícios é que o CSS será mais reutilizável.

Mas sua folha de estilos também deve tornar-se muito menor. O OOCSS deve tornar-se, sobretudo, muito mais fácil a manutenção e alteração do design de um site. Além disso, um dos grandes benefícios da orientação a objetos é a possibilidade de mudar partes do seu site, sem que isso implique no não funcionamento de outras.

Como praticar CSS orientado a objetos?

O primeiro passo é realmente se preparar para o CSS: você deve terminar o seu objeto HTML. Geralmente, o objeto terá um cabeçalho, um corpo e um rodapé, embora cabeçalho e rodapé sejam opcionais. Veja na Listagem 1 um exemplo de objeto básico que representa muito bem isto.

Listagem 1. Exemplo de template simples para páginas web.

  <div class="object">
      <div class="head"></div>
      <div class="body"></div>
      <div class="foot"></div>
  </div>

Antes que você presuma que esse tipo de layout está um pouco ultrapassado, em vista da quantidade de novas t ...