I recently did an introduction to Less CSS following my read of why abstraction matters, in this article I was demonstrating how Less could be useful to your front-end development team, but the big disadvantage was that you had to install ruby on your development computers in order to use it.
Installing ruby in some case can be out of the question, however, using a non intrusive php framework works quite better, and this is what xCSS seems to aim for.
And it works pretty well
Installing xCSS is pretty easy, it took me 5 minute to follow the instruction the first time, and the other times were a breeze.
The idea is simple, you put a folder named xcss on top of your css folder. You also add a source folder where you put your working css files. You go in your xCSS config file and a add path to your source file and hop! You are good to go, but this page explains it a lot better.
It instantly creates your CSS file every time you refresh the page, really, you do not feel that’s something is at work here.
What can you do with xCSS
Unfortunately xCSS is pretty young and is not the most complete abstraction framework feature wise. You get the basic variables, nested object and you can extend a class from another class, that’s it.
// Variable in Xcss
vars {
$path = ../img/tmpl1/png;
$color1 = #FF00FF;
$border = border-top: 1px solid $color1;
}
.selector {
background-image: url($path/head_bg.png);
background-color: $color1;
$border;
}Personally, I do not care for nested objects, this is just not the way I work, however the other features can really extend your way of doing css. This is also where xCSS do things a bit differently, I really meant extending a class earlier. In xCSS you do some kind of oriented object CSS, basically, if you want to add all the properties from a class to another, this is what you would do: .specialClass extends .basicClass {}.
It might not be for everybody, but I like the feel of it. Also a nice little touch, when your project is ready to be push on the web, you can minify the CSS directly from xCSS by changing a small line in the config file.
And if we compare with others abstraction framework
Pros:
Simple to install in all your projects
No installation required on your computer or server
Generated CSS is instant
Can be minified on the spot
Cons:
A bit low on feature (no equation pains me)
@import not supported, need to be declared in the config file
Conclusion
I am quite happy with xCSS and I hope for more features in the near future. I decided to implement it in my CSS framework. It is that good.
Update October 27: xCSS has recently been updated with the equation feature