Friday, January 20, 2012

LESS is awesome

Lately we started using LESS for some of our web apps at i.TV. I just wanted to iterate some of the benefits and a few of the downsides.  Initially we were using connect-less to compile our less dynamically when the app is started. We still use this for our development environment but now we use lessc in our build scripts to compile it before hand. It's a little more stable that way.

AWESOME BITS

  1. We can use constants for z-indexes to prevent the endless desire of devs to make them higher forever. z-index: @z-modal > z-index: 999999999
  2. Separate .less files for each UI widget makes for awesome code organization. This is HUGE!
  3. Makes CSS3 browser prefixes a little more manageable.
  4. Using variables for color names makes it a lot easier to make sure you're on the same page with a designer.
  5. CSS code re-use FTW!
  6. Mixins are okay.
NOT-SO AWESOME BITS
  1. Weird issue with using the @arguments variable where there are commas. (See: https://github.com/cloudhead/less.js/issues/301)
  2. connect-less initially had some trouble including files with includes inside them, but I think it's fixed now.
  3. It would be really nice to be able to just include a full directory instead of manually including all x number of files (within the widgets directory for example) manually.
  4. LESS doesn't encouraged any specific structure or good patterns, which is fine, but you sometimes get really excited about using the nesting feature, because it seems so convenient and clean, but it can actually can make your code less re-usable if you don't do it right.
Posted by at

2 comments:

  1. AnonymousJanuary 23, 2012 at 2:11 PM

    LESS is pretty awesome. However I have found that it doesn't handle errors very well, the node module will just crash the server if you try to reference a variable that doesn't exist.

    I agree with your last point that you need to be careful with nesting because you can end up generating a bunch of inefficient selectors.

    ReplyDelete
  2. Miller MedeirosFebruary 4, 2012 at 7:28 AM

    One thing that I fell a lot of people don't realize is that you don't need LESS/SASS/Stylus to be able to split your CSS files into smaller modules. You just need a compiler which combines all the CSS files together. HTML5-Boilerplate has a build script that inlines all the `@import` and the RequireJS optimizer as well. You could even use the LESS/SASS/Stylus compiler just for that feature.

    "Find and replace" inside a project folder in many cases are more than enough to make sure values are synchronized, no need for constants.

    But at the end of day what really matters is if the tool is helping you to be more productive or not. If you find that LESS is a good tool for the job than you should definitely use it, but we should always question once in a while if the tools are indeed necessary/helpful and if there is a "better" approach.

    Cheers.

    PS: @Rob the nesting isn't bad because of performance but because it can create specificity problems, making it hard to overwrite a rule.

    ReplyDelete

Subscribe to: Post Comments (Atom)