I Want Robust CSS

Variables and mixins are all I want to Christmas

Update: After a chat with Mr. Mark Otto, some of my love for LESS.js has been re-kindled, but everything below still stands. Take note, if the teams that I worked on were on-board for LESS.js and it was easy to export for final production code (thus not making CSS dependent on JS) I would be all about it.

Original Post: So I had a short lived love affair with LESS.js, but it fell apart since I have to pass my work off to clients and also work in a collaborative environment. If you're not familiar with LESS.js you should check out the site, but ultimately LESS.js extends your CSS with variables, inheritance, nested CSS rules, basic functions and a few other goodies.

less and css

LESS.js crushes it from the perspective of a lone developer looking for an awesome way to write more flexible and concise CSS. Variables give the power to change entire color schemes in seconds. "Mixins" make annoying vendor-specific attributes (box-shadow, border-radius, etc) much more manageable since you only write the code for it once. I would go so far as to say nested rules make CSS easier to read and faster to write, but in a collaborative environment, LESS.js is too much overhead. (Take note, I am focusing on LESS.js, not the LESS Ruby gem, but many of the points apply to both.)

First off, you have to have your entire development team on-board. If you're writing your code in LESS syntax, everyone has to understand and buy into it. This isn't a giant hurdle since LESS syntax is very easy to parse and learn, but it's still a barrier to getting started regardless. Worse still, if you need to pass the files to your clients, you either have to convince them to use LESS.js or grab the compiled CSS (not even sure how to do this with LESS.js) and basically create a new CSS file to link to.

Secondly, since LESS.js is running on the client-side (this is changing now with the ability to run LESS.js on the server-side with node.js) it has to take your LESS file and compile it into CSS the browser can render. What this essentially means is that all your CSS is now JS dependent and it takes time to compile that on load. That is all bad. I'm told that LESS.js is a king at caching and is getting faster, but when I was using it a couple months ago heavily, it really caused some serious slowdowns and load issues. 

My solution? Include these types of functionality into CSS. There, I said it. Purists will stone me for it, but I think some scripting functionality in CSS would make developers lives easier. Sure the learning curve might go up a bit, but shouldn't the language cater to those who use it everyday? In addition, with the way LESS works, regular CSS would still be parsed exactly the same, so harm done for those who want to continue using the existing CSS syntax. 

If you haven't had a chance to dig into LESS and you do much of your work alone, do so, cause it's glorious. Otherwise, pray that the word on the street about the CSS3 spec maybe getting variables is true for a start (although the proposed syntax is not nearly as clean as LESS's implementation). 

Have an opinion? Hit me up on twitter and let me know what you think - I am interested to get the pulse on this :)