Less CSS performance and implementation

css less css-frameworks
BillPull picture BillPull · May 24, 2011 · Viewed 7.1k times · Source

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

Jonathan Miller picture Jonathan Miller · May 24, 2011

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-

Related questions

Correct way to create rounded corners in Twitter Bootstrap

I've just started with Twitter Bootstrap and here is one question. I am creating custom <header> block, and I want it's bottom corners to be rounded. Is there any "correct" way to do this by using predefined classes, …

Read More
Is it possible to use vh minus pixels in a CSS calc()?

I have following CSS rule in a Less file: .container { min-height: calc(100vh - 150px); } Which doesn't work at all. I want to make container full window height and minus header, footer fixed height. How can I do that?

Read More
Double border with different color

With Photoshop, I can put two different border to an element with two different color. And with that, I can make many dynamic shade-effect with my elements. Even with Photoshop effects, I can manage that with Drop Shadow and Inner …

Read More