Early 2010 I was chatting with a colleague about how useful it would be to have variables in CSS. I was working with some stylesheets that I'd inherited that were being used to theme a number of microsites. It had occurred to me that if variables had been used throughout to define the various colours then it would have been a lot quicker to tweak and produce new versions of the CSS when preparing a new theme. This all basically led to me discovering Less CSS, a CSS extension that adds dynamic behaviour.
Less CSS
With in no time of discovering Less I had the compiler installed and was making use of its many features. Less is so much more than variables. There are also "mixins" that work a bit like functions for outputting a group of properties, nested rules, and functions and operators that allow you to do things like multiply a border width or lighten a colour.
Like a kid in a sweet shop I quickly started nesting my CSS statements, making extensive use of variables and throwing in the odd mixin or two. I was loving Less; putting together my stylesheets had just become so much easier.
One year later…
So everything seemed so good until a year later I came back to look at one of the compiled CSS stylesheets. Someone had at some point had to make a quick fix to it, so the compiled version was no longer in sync with the Less file that had generated it. The effort to work out the changes and get them back into the Less file was too great, so I ended up working with the standard CSS.
Looking at the CSS that Less was producing gave me a bit of a headache; it was full of redundant statements. My earlier excitement of what Less had to offer had got the better of me; and through the laziness it instilled in me I had lost the tight focus I used to give my stylesheets that made them so workable.
In particular, nesting statements made it too easy to create statements in the CSS that were never needed; and mixins similarly left redundant classes at the top of the stylesheet.
Less and JavaScript
I'm aware that since my first encounters with it, Less has developed and taken a new more dynamic approach. You no longer need to compile your Less file, instead you can include it directly in your page and use some JavaScript to convert it into something readable by a browser.
This of course addresses, in part, my issue from before with the compiled CSS being altered rather than the Less file; but for me this is another reason for moving away from using it. I don't want to make my pages' layout dependent on JavaScript: JavaScript and style should remain separate much like we do with style and content. JavaScript should provide the extra layer of functionality to a page, not dictate how it should look.
The state of the affair
I've since returned to starting with CSS and sticking with it for my stylesheets. I like the ideas behind Less, but it had taught and encouraged bad habits in me. I personally like my stylesheets to be as minimal as possible and Less was creating clutter.
At least with CSS I am working in a standard that should be familiar to all web designers/developers, unlike Less. My stylesheets can be picked up and used by all who follow me.
I should of course state that I haven't completely given up on using Less. A project I'm currently working on requires themeable templates where a user defines the colours of certain page elements whilst the layout and typography remain the same. Here, Less' variables come in handy and allow us to quickly generate the stylesheets using the Less preprocessor without having to write one for ourselves.
Less does have its value, but for me, 9 out of 10 times I'm sticking with good old CSS!
The end
So basically I'm no longer using it. It's not a bad extension to CSS (ignoring the JavaScript development), but it made it too easy for me to get slack with my stylesheets. It would be interesting to hear what other's experience with Less has been; is it a good thing or not?