xCSS Framework – Orientação a Objetos em CSS

Você não sabe o que é Orientação a Objetos? Vamos lá, vou transcrever aqui o que já foi dito em um texto sobre Orientação a Objetos em CSS:

A orientação a objetos, também conhecida como
Programação Orientada a Objetos (POO) ou ainda em inglês
Object-Oriented Programming (OOP), é um paradigma de análise, projeto e
programação de sistemas de software baseado na composição e interação
entre diversas unidades de software chamadas de objetos. Em alguns
contextos, prefere-se usar modelagem orientada ao objeto, em vez de
programação.

Basicamente programação orientada a objetos tem como meta
identificar o melhor conjunto de objetos para descrever um sistema de
software. O funcionamento deste sistema se dá através do relacionamento
e troca de mensagens entre estes objetos. C++, C#, Java, Object Pascal,
Objective-C, Python, Ruby são exemplos de linguagens de programação
orientadas a objetos, mas e o CSS? Ela não é server-side, como então
posso escrever CSS orientado a objetos?

Já apresentei uma forma em meu outro blog,
através de jQuery, mas pode ser falho, pois você depende que o
user-agent tenha suporte a JavaScript para que a aplicação funcione
corretamente, e a outra forma que acabei descobrindo foi o xCSS Framework.

O que é o xCSS Framework?

xCSS Framework é um framework css desenvolvido em PHP para os
profissionais de desenvolvimento front-end que visa minimizar o tempo
de desenvolvimento proporcionando um fluxo de trabalho extremamente
simples, onde além de tudo você possui uma visão intuitiva da estrutura
global do seu CSS, utilizando variáveis e reutilizando o código
constantemente. Ele é extremamente leve e integra-se perfeitamente a
qualquer fluxo de trabalho e o melhor de tudo é que você, mesmo
utilizando um Framework CSS, conseguirá manter seu código semântico, o
mesmo não acontece com outros frameworks css, onde você deve utilizar
classes pré-definidas.

Features

O xCSS Framework ainda é jovem, mas já possui várias features como:
estender uma classe à outra classe, suporte a variáveis, operações
matemáticas, entre outras. A declaração de variáveis é
semelhante ao PHP:

vars {<br />    $path = ../img/tmpl1/png;<br />    $color1 = #FF00FF;<br />    $border = border-top: 1px solid $color1;<br />}

Após a declaração das variáveis, basta efetuar as chamadas nas declarações CSS:

.seletor {<br />    background-image: url($path/head_bg.png);<br />    background-color: $color1;<br />    $border;<br />}

Seletores aninhados:

.seletor {<br />    a {<br />        display: block;<br />    }<br />    strong {<br />        color: blue;<br />    }<br />}

O resultado desse código após ele ser processado será o seguinte:

.selector a {<br />    display: block;<br />}<br />.selector strong {<br />    color: blue;<br />}

Mais um exemplo, agora utilizando self:

.selector {<br />    self {<br />        margin: 20px;<br />    }<br />    a {<br />        display: block;<br />    }<br />    strong {<br />        color: blue;<br />    }<br />}

A saída desse código é a seguinte:

.selector {<br />    margin: 20px;<br />}<br />.selector a {<br />    display: block;<br />}<br />.selector strong {<br />    color: blue;<br />}

Instalação

Sua instalação é extremamente simples e não demanda configurações no servidor, basta seguir a explicação do desenvolvedor do xCSS no site. Você deve criar uma estrutura semelhante à mostrada na imagem abaixo:

Em contrapartida desenvolvi uma página de exemplo com o xCSS para estudo. Aconselho também a efetuar o download dos arquivos para futuras consultas.