Of all the code I write my CSS is probably the messiest and least well-maintained. While I get near-obsessed over the tidiness of other "actual" code I often find my CSS is a complete mess.

When coding I try and follow the DRY approach but with CSS am usually "happy" to duplicate rules over and over; copy and pasting all over the place until CSS files become unmanageable.

Writing CSS if no fun! Especially when you get to the nitty gritty of vendor-specific stuff in CSS3 like border radiuses, background gradients and drop shadows. If you plan on embracing CSS3 then you might want to read on for a better way to code CSS.

A Better Way

Writing CSS should be more like programming - with variables, methods and the like. This is where LESS steps in - calling itself a "dynamic stylesheet" - it lets you use variables, operators, functions and arguments.

LESS is how CSS should have been implemented in the first place!

Show Me Some LESS

Here's a basic example of some LESS code:

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer { 
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

When the above code is passed through the LESS "compiler" you get the following CSS out the other end:

#header{
 color:#333333;
 border-left:1px;
 border-right:2px;
}
#footer{
 color:#114411;
 border-color:#7d2717;
}

Perhaps that's enough to convince you of the need to use LESS? If not, read on.

Getting a bit more advanced let's look at another example:

input{
 .border-radius(8px);
 .inner-shadow();
}

The CSS outputted for the above LESS code is:

input{
    -webkit-border-top-right-radius:8px;
    -webkit-border-bottom-right-radius:8px;
    -webkit-border-bottom-left-radius:8px;
    -webkit-border-top-left-radius:8px;
    -moz-border-radius-topright:8px;
    -moz-border-radius-bottomright:8px;
    -moz-border-radius-bottomleft:8px;
    -moz-border-radius-topleft:8px;
    border-top-right-radius:8px;
    border-bottom-right-radius:8px;
    border-bottom-left-radius:8px;
    border-top-left-radius:8px;
    -webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.4);
    -moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.4);
    box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

Which would you rather maintain - the LESS or the CSS? If you want to change the border radius to 6px you'd have to do it in about a dozen places in CSS, compared to 1 place in LESS. Sold on the idea yet? You ought to be!

In the LESS code above the .border-radius() and .inner-shadow() bits are what's known as "mixins" in LESS parlance. You can write your own mixins but I just downloaded a load of predefined ones called "LESS Elements". This gives you a file called elements.less which you need to include in your LESS code before using the mixins. So the LESS code I pasted above should actually have been this:

@import "elements.less";

input{
 .border-radius(8px);
 .inner-shadow();
}

For a good example of advanced use of LESS download Bootstrap and take a look at how they organise their LESS files and how it all works.

If you do any decent amount of CSS coding then I'd say it's worth your while looking at how using LESS could help with that. I love it!

I've only really scraped the surface of what it can do in this post. To get a better example, take a look the LESS website and the Bootstrap code.

Where to Write LESS?

The best way I've found to write LESS code and compile to CSS is with the Crunch App, which you can see below:

There's a .Net library with which you can write LESS directly in Visual Studio and have .Net produce a cacheable CSS file from it - on the fly!

If you're a Domino developer then you'll have to resign yourself to the idea of maintaining the CSS outside of Domino Designer. Although I guess you could use WebDAV to save CSS files directly in to the NSF? That's a rainy day project I guess...