Trata-se de um paradigma novo proposto pela engenheira de software Nicole Sullivan como forma de organizar o estilo de nossas páginas com base nos tópicos da metodologia da orientação a objetos: com atributos e métodos, herança, polimorfismo, encapsulamento, etc. Veja como fazer uso de todos estes conceitos através da criação de um modelo de site de blog, além de entender como a estrutura HTML deve conversar diretamente com o seu CSS.
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.pngCriando 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.
Comecemos então pela importação dos arquivos necessários e definição do cabeçalho da página HTML e corpo (cabeçalho e rodapé). Na referida listagem, teremos a seguinte divisão de responsabilidades no que se refere a organizar o conteúdo final da página:
· Tag <article> (de classe container): servirá como container geral da página contendo todo o conteúdo do corpo da mesma;
· ...
