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 tags da HTML5 que temos para estruturar tais seções, analise o código da Listagem 2 que pode perfeitamente substituir o anterior.

Listagem 2. Exemplo de template simples para páginas web. <article> <header></header> <section></section> <footer></footer> </article>

Por meio da HTML5, temos agora um objeto com significado semântico. Na verdade, este é o objeto que iremos usar para o nosso exemplo. Se vamos escrever algum CSS, vamos precisar de algo para o estilo preparado sob um modelo básico: uma página inicial de um blog e uma única página de post. Para isso, usaremos alguns elementos de estilo da HTML5 e do CSS3.

Com o objetivo de tornar o aprendizado mais fácil e rápido, vamos adaptar alguns dos conceitos do OOCSS na prática, definindo inicialmente a estrutura HTML do nosso blog e entendendo os seus respectivos componentes internos.

Para isso, precisaremos de uma estrutura de diretórios e arquivos iniciais que lidará com recursos como HTML, CSS e imagens. Portanto, em um diretório de sua preferência, crie a estrutura demonstrada na Listagem 3.

Veja que temos dois diretórios, além do raiz /oocss, que conterão os arquivos CSS e as imagens. Estas últimas você pode encontrar no arquivo de download deste artigo.

Listagem 3. Estrutura de diretórios e arquivos do projeto. oocss | index.html | post.html | +---css | style.css | texto.css | \---img bullet.png

Criando projeto de exemplo

Para iniciar nossa implementação, abra o arquivo index.html criado e insira o conteúdo da Listagem 4 no mesmo.

Vamos entender aos poucos o seu código, mas desde já é importante que o leitor compreenda como deve ser montado o esqueleto principal de todas as páginas que serão construídas sob o mesmo design e, consequentemente, farão usufruto dos benefícios do OOCSS."