What’s wrong with CSS?

Don’t get me wrong, I love CSS! It was revolutionary when it first arrived back in 1996 and it remains one of my favorite languages to work with today! Sometimes I even skip Photoshop and go directly to designing with markup.

That being said, CSS is fundamentally “stupid”… Let me explain:

Let’s say that you’ve finished the front-end dev of a site. The client loves the design but comes back the next day and says “The site looks great but instead of blue, can we go with purple?” 

Great! Maybe not the best idea, but it would have been easy to change if they had said something before we had moved onto coding the site; now we’ve got to go back to our markup and find every different shade of blue and change it. If only we could have set it in one place in the stylesheet and then updated it whenever the client asks.

This is a great situation where LESS could come to your rescue.

Benefits of Working with LESS

Before reading any further, you might be thinking “Hey Sean, why are you hating on CSS? It’s a core web technology so why would I want to change?” I’m as big a proponent of the three core web languages as the next guy, which is why I use LESS to extend CSS to help my markup (and by extension, myself) become more agile.

There’s no new language to pick up because LESS is written in CSS. This means that we won’t run into the same problem that we have with jQuery, where many front-end designers know how to write jQuery but don’t have a clue when it comes to tackling javascript.

The other great part about working with LESS over other frameworks is that you don’t need to rely on Ruby to compile your code. Even better, with the techniques described below, you won’t need to overcomplicate things using javascript or terminal to compile it either.

Specifics

Before I get into the details, I should mention that LESS was created by Alexis Sellier. He’s a super smart guy so you should check him out on his twitter or his website.

The ability to define variables will probably be the single biggest reason why you start using LESS. The example above of needing to change blue to purple could be fixed by changing the value of only one variable.

Instead of your stylesheet resembling this:

// Vanilla CSS
p {
    color: #FFFFFF;
}
p a {
    color: #0084ff;
}
p a:hover {
    color: #0074df;
}

You can define your variable in the beginning and plug them in wherever you need them:

// LESS
@primary-color: #0084ff;
@secondary-color: #FFFFFF;

———————————————————

p {
    color: @secondary-color;
}
p a {
    color: @primary-color;
}

How awesome is that?

So what else does LESS have to offer? Well now that you’re defining variables, you’ll want to use functions to alter them. For example, you might want to darken that link on mouse hover:

// LESS
p a:hover {
    color: darken(@primary-color, 15%);
}

Now you can change the color of your links in once place and the change will translate all over the site.

Let’s take a look at nested rules. Instead of constructing long selectors to apply your styling, you can simply nest selectors within one another, showing clear inheritance. To illustrate what I mean, let’s take the above examples and apply nesting.

// LESS
p {
    color: @secondary-color;
    a {
    color: @primary-color;
        &:hover {
            color: darken(@primary-color, 15%);
        }
    }
}

This is a simple example, but you can probably see how powerful this becomes when you start extending it out.

You may have noticed the ampersand (&) combinator. This is used whenever you want to concatenate a selector to its parent selector.

Now that you've written all of this LESS CSS, you'll want to compile your code. The output will look like this:

// Compiled CSS
p {
    color: @secondary-color;
}
p a {
    color: @primary-color;
}
p a:hover {
    color: darken(@primary-color, 15%);
}

I’ve mentioned “compiling your code” a few times so I should probably explain myself. LESS needs to be compiled into CSS code in order for it to be included in your website. The easiest way to do this is using the LESS Mac OS X application (developed by Alexis Sellier — like I said, one smart cookie). The application automatically compiles your code every time you hit save which means no muddling around with terminal to get your code compiled (a boon for most of us designers).

Now that I’ve gone over the basics, how about one more example to win you over? Let’s take a look at mixins. The easiest way to describe mixins is that they’re just like variables but for entire classes.

Let’s say that every button on your website has rounded corners and you’ve declared it like this:

// Vanilla CSS
a.button {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;<
    border-radius: 4px;
}

Now the client’s come back and has asked for the corners to be more rounded. Instead of a border radius of 4px, they want it bumped up to 30px. Difficult to change? Not if you're using mixins:

// LESS
.rounded-corners (@radius: 30px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}

———————————————————

a.button {
    .rounded-corners;
}

Now, whenever you want to change that border radius, you just need to modify it in one spot and it’ll update throughout your code. Cool eh?

What I’ve gone over so far should be enough to whet your appetite for LESS. Don’t worry though, LESS has a lot more to offer.

LESS CSS Toolkit:

I’ve compiled a list of useful resources, applications, and plugins that helped me when I first started using LESS. Enjoy.

General LESS Resource

General LESS guidelines / rules. It covers Variables, Mixins, Nested Rules, Functions & Operators in great detail.

LESS Mac OS X Application

Like I mentioned above, this application was developed by Alexis Seller. It automatically compiles your code every time you hit command-S, which means that you won’t need to tinker with Terminal every time you want to see your changes.

Coda Syntax Extension

For those of you who use Coda as your text editor, there’s a handy LESS syntax extension. This will allow Coda to auto-detect a .less stylesheet and style your markup accordingly.

HSL Color Codes

If you’re not already using HSL, you soon will be. HSL is a web-friendly color coding system that makes it possible to come up with color codes “right off of the top of your head”. The reason I’ve included it in this post is that it’s a necessary component of LESS if you want to use alphas (the A in RGBA and HSLA) to create changes in opacity.

Colors (Mac OS X Application)

A minimal yet powerful color picker application for Max OS X. It can generate HEX, RGB, RGBA, HSL, and HSLA (to name a few).