Less CSS performance and implementation

Question

What are the best ways to use LESS for CSS.

• Basically should the Devs write a Less File and then have it compile for production
• Should I link the LESS code and the javascript file.
• Or should I skip the LESS rout altogether and just remake the classes

I am trying to wrangle together some rather sloppy css and want to get control of it before making major improvements. I think it would be very good to have site wide variable so Less seems like a good thing with the variables and nesting.

I am replacing a lot of the background images with css gradients and box shadows so I am also trying to get rid of the vendor prefixes. Sometimes I see what kindof looks like class overload but is it bad to append a lot of classes to an element such as

<div class="comment dark-shadow round-corners"></div>

Answer 1

Less is a great styling language. I use it extensively, and it really helps with code maintainability, as well as with speed of writing the styles.

I personally feel that your styles should not be dependent on javascript to render, so I use the less.app to compile all my LESS into CSS. I rest more peacefully knowing that all my CSS is there and that it works correctly before I put anything "live".

If you are interested I have also been compiling a LESS mixin library that can be very useful: https://github.com/jdmiller82/-lessins-

Answer 2

I agree with Jonathan, I don't think you should depend on the users browser to render the styles.

I came up with a solution that uses node.js on the server to intercept requests like styles.css and try to find the equivalent .less file (in this case styles.less) and parse it and return it as CSS.

So on your server you would just have styles.less but you could request the URL example.com/styles.css and get the parsed LESS file. That way the integration is seamless for the rest of your application and it doesn't require the user has JavaScript enabled either.

You don't have to be using node.js for the rest of your app either. I did this in a PHP application.

You can read my tutorial here: http://programming-perils.com/155/parse-less-files-on-the-fly-and-serve-them-as-css/