xCSS Framework – Orientação a Objetos em CSS
Postado por: Pedro Rogério em
Você não sabe o que é Orientação a Objetos? Vamos lá, vou transcrever aqui o que já foi dito em um outro post 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 têm 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 fucnione 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: extender uma classe a outra classe, suporte a variáveis, Operações matemáticas entre outras features. A declaração de variáveis é semelhante ao PHP:
vars {
$path = ../img/tmpl1/png;
$color1 = #FF00FF;
$border = border-top: 1px solid $color1;
}
Após a declaração das variáveis, basta efetuar as chamadas nas declarações CSS:
.seletor {
background-image: url($path/head_bg.png);
background-color: $color1;
$border;
}
Seletores aninhados:
.seletor {
a {
display: block;
}
strong {
color: blue;
}
}
O resultado desse código após ele ser processado será o seguinte:
.selector a {
display: block;
}
.selector strong {
color: blue;
}
Mais um exemplo, agora utilizando self:
.selector {
self {
margin: 20px;
}
a {
display: block;
}
strong {
color: blue;
}
}
A saída desse código é a seguinte:
.selector {
margin: 20px;
}
.selector a {
display: block;
}
.selector strong {
color: blue;
}
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 a 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.
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
Acredito que o esse framework expressa a necessidade do css ter variáveis ou orientação a objetos. Achei muito boa a iniciativa mesmo sem ainda ter testado. Vou agora aprender mais sobre ele.
Tudo isso nao torna a execucao mais lenta ???
Muito interessante esse Framework, pena que seja utilizado em PHP.
Gostaria que tivesse para outras linguagens como ASP.NET também.
Sem querer agredir outras linguagens, mas Raphael, você já pensou em migrar para o PHP? Esse framework é uma das milhares de vantagens que o PHP te dá. Se formos falar de CMS, frameworks e ferramentas de tudo quanto é tipo de segmento, não paro mais de digitar.
Por um lado, acho a idéia de um framework como esse (assim como outros como o Less) boa, porque torna o CSS muito menos chato de se escrever. Além do mais, *essa* abordagem a CSS orientado a objetos faz sentido, não é engessada e não me obriga a usar várias classes em um mesmo elemento.
Por outro lado, a idéia de compilar o CSS por algum motivo não me agrada completamente. Não com a questão da performance em si (cacheando, sem problemas), mas acho que talvez na questão da praticidade. Pode ser porque eu nunca usei, preciso incluir isso no meu fluxo de trabalho pra saber se atrapalha ou ajuda. Mas, especificamente com o xCSS, a maneira de compilar o CSS não me agrada nem um pouco. Um monitor de arquivos como o Less possui seria legal: a cada modificação do arquivo o CSS era recompilado automaticamente. Vou fazer meus testes, e se eu decidir usar o framework, talvez eu tire um tempo pra contribuir =)
Eu já faço CSS orientado a objeto, mas usando PHP
Sai um codigo muito mais limpo, e bem mais parecido com o que eu realmente faço a mão.
Eu acho que eu não usaria esse framework, parece sir um codigo esquisito.
Não gostei muito tamb´me de como ele escreve os seletores filhos, sei lá, estou acustumado do jeito tradicional =/
já fiz uns testes com esse framework, é muito bom, principalmente porque faz um cache legal, tanto pro navegador quanto pra aplicação php em si.
complementanto… pra quem gosta desse tipo de framework, sugiro dar uma olhada no CSScafold, também em PHP.
http://anthonyshort.com.au/scaffold/
muito bom
Me interessei pela coisa, e fiz um script que monitora arquivos modificados e os recompila automaticamente. A quem interessar: http://github.com/juliogreff/xcss-watcher/blob/master/compiler.php
Basta colocar o arquivo no mesmo diretório que os arquivos do xCSS, definir a configuração normalmente e rodar o comando: php compiler.php
Na unha é melhor…
Concordo plenamente!
Acho que nenhum dos dois pararam pra ver e baixaram os arquivos não, pois quem ainda faz o CSS é você, a única coisa que o PHP faz é “compilar” o arquivo.
Acho melhor na unha mesmo.
Engraçado como no nosso Brasil sempre tem esses do contra, ou os que querem aparecer.
o software é apenas uma forma de ajudar o desenvolvedor, e vem esses pregos ai falarem. ” na unha é melhor ” .
E o KIKO se é melhor? o post é para mostrar o framework e não saber se voces pregos fazem na unha e se realmente fazem, que isso eu duvido muito.
Um comentário sem necessidade.
Não acredito que seja proíbido entrar no blog, ler o artigo, aprender sobre a tecnologia e dar um parecer.
Para programadores Ruby, less é uma boa alternativa:
http://lesscss.org/
Algumas pessoas já encontraram formas comodas de trabalho e quando surgi novas propostas a tendência é se defender desta forma… Eu ainda não testei, mas fazendo o CSS na unha senti falta de várias coisas, como a herança de classes…