Some thoughts on Less CSS

First – I will clarify that this post is about the Less CSS method of writing CSS (writing in another format and then compiling to CSS, either through Ruby or Javascript) rather than the Less CSS framework. It’s confusing that these two things have the same name.

If you would like to get started with Less, I think the easiest way right now is to use the javascript include method mentioned on this page. There might be a few little quirks, I didn’t run into any.

Basically, you just write your Less CSS code in a separate file with the extension .less. Then you include that file and a link to the Less CSS javascript in your HTML head like so

<link rel="stylesheet/less" href="stylesheets/less/new.less" type="text/css" />
<script src="http://lesscss.googlecode.com/files/less-1.0.18.min.js"></script>

(Sorry, I know I need to write some better code styling)

Alternatively, if you are on OSX, you can use less.app to auto compile your code on the fly. Or, you can always use the original Ruby version to do the same.

Anyway, I spent a bit of time trying out writing CSS using the Less CSS notation, and I have to say it is quite intuitive. I don’t think I can add much (yet) when it comes to how to write in this format, so I will just point to the original less css documentation and the post “My thoughts on LESS.”

I spent most of my time trying out the different ways to implement LESS and experimenting with how it would fit into my workflow. I installed the Ruby gem and used it for basic compiling, and that worked fine. I tried out less.app for on the fly compiling, and that worked fine, too. I tried serving the file using the javascript method above, and that too worked fine.

I then tried to figure out how to get an auto refresh development environment similar to what I get with CSSEdit. I tried the Xrefresh plugin for firefox, but ran into a problem with my Ruby install (which I am not patient enough at present to troubleshoot- I will wait until my work gets around to upgrading me to Snow Leopard). So right now I am stuck alt tabbing and refreshing. SIGH. so hard. This article discusses other ways to get an auto refresh on your browser. I may try out TextMate for this, as I have been meaning to try it out anyway, and it seems to have much more active development than CSSEdit.

Conclusions

I really like Less, and think it will be especially useful for complicated layouts. I already know Ruby (a little), so the notations are familiar, but it doesn’t look so different from CSS that people that don’t know any programming will be overly intimidated. The variables are cool, but after using Less, I think the ability to set an attribute the same as another attribute is even cooler (this is called “Accessors” – see the aforementioned “My thoughts on Less” article.)

However, until editors get built in support for Less, I don’t see using Less as my production level code. It seems like it would be too easy for the compiled CSS file to get overwritten by someone else on the project because they don’t know what to do with the .less file. I would not want to use the on the fly javascript version in a production site – I browse sites too oven with javascript turned off to be comfortable with that. So I will likely use less right now for initially developing a new site CSS, either using the javascript method and then later including the compiled code, or using less.app for on the fly compiling. After the site is “done”, I will compile and include the compiled CSS for the production site. Perhaps I will inclide the .less file in a “notes” or “src” folder in the site for future reference.

I am unsure whether I will try to teach my student workers to use less over traditional CSS – probably not yet. Most of them have only a basic understanding of CSS to begin with, I worry that it might be a bit much to throw at them. However, for those that have taken Steve Ramsay’s Ruby class, I will definitely mention less as an alternative.