If you’re to nail CSS, Less is more

Here’s the deal : a while ago, i wrote an article about CSS and how one’s not supposed to forget about the C in CSS (C meaning Cascading, you noobs…); but the fact is, the more i’ve been working with people, the more i’ve seen stuff that just give me the Gee-Bees : people confusing classes, ids, creating #containers in nested .containers containing .contents. Of course, it wasn’t that bad, it’s been a long time since i’ve seen CSS code with a .red-background classname (FYI, last time i saw one, the background color was actually blue, which helps understanding why it is so wrong). However, for a couple of years now has emerged a new way to design CSS, and when i say « design CSS », i mean neat, clean and beautiful CSS, with a capital C.

Meryl Streep is that good for a reason

It might only be a legend, but it’s been told that Meryl Streep considers the fact that being an actor doesn’t really rely on what you do as much as on what you don’t do; she would say that less is more. Funny i mention it, because we’re going to talk about a way to create awesome CSS design using less code, and it’s called Less CSS.

First of all, Less CSS (hereafter simply « Less ») is nothing but a cutie-lighter-than-light-javascript-file. There, i’ve said it !

What it does is it gives you all the gifts you always wanted regarding CSS files : variables, nested information, functions, etc. Ten years ago, i used to work with CSS files that were actually PHP files (completely dynamic), and i’m not proud of it (i was, then), but the fact is that Less succeeds where server-side scripting had failed : it lets you focus on what you’re doing and prevents the distraction of how you’re doing it (and i’ve seen some long-ass CSS files in my career, knowing that whoever wrote them had been running out of synonyms for « container », « menu_item », « side_menu » and so on).

Head first

Where do we start ? You go to lesscss.org, follow the « Download less.js » button link, copy the content displayed and save it on your computer in a less.js file. Let’s assume you’re following this post with a directory that contains nothing but : an index.html file, a js/ directory and a css/ directory. Well, then, put your less.js file in the js/ directory. Then, in the css/ directory, create an empty style.less file  (yes, the extension is .less and not .css). Finally, open your index.html and copy this incredibly sharp and witty code :

<!DOCTYPE HTML>
<html>
<head>
  <title>Less is more</title>
  <link rel="stylesheet/less" type="text/css" href="css/style.less" />
  <script type="text/javascript" src="js/less.js"></script>
</head>
<body>
</body>
</html>

Note — because it’s really important — that the less.js file is called AFTER the style.less file. Believe it or not, you’re all set to work way better than you’ve been used to.

First sample code

 

Understanding variables

Open your index.html and insert the following within the <body> of your document :

<div id="greetings">Live long and prosper</div>

I know…great, right ?

Now open the css/style.less file. Here’s a good impression of what can cross your mind as you try to make your index page unforgettable :

  • i don’t know what color i want to use yet;
  • i know i want a border around the greetings div;
  • i know i’ll probably use the same color for the border and for the text within that div;
  • maybe i’ll go with rounded corners;
  • should i set up some margins for the body ? for the div ? What about padding ?

And because all those questions will keep on running as long as you’re not done with your project, it tends to get hard to keep track of everything you change so that you’re sure you’ve changed it everywhere.

Let’s assume i’d go with the following CSS file :

body {
  margin: 0;
  background-color: #fff;
  font: 11px normal Helvetica,Sans-serif;
}

#greetings {
  border: 1px solid #999;
  color: #999;
  border-radius: 5px;              /* mostly for IE */
  -moz-border-radius: 5px;      /* mostly for Firefox */
  -webkit-border-radius: 5px;   /* mostly for Safari and Chrome */
}

Well, you should normally be able to tell the weaknesses of such a file :

  • if you feel like changing the color of the border and text, you need to change two values;
  • if you feel like changing the radius of the div corners, you need to do it at three different lines.

At this point, i’m already bored just reading myself and, let’s face it, our index page lacks a certain je-ne-sais-quoi that really could improve its quality.

Now, let’s write the exact same CSS code, but using Less instead : (go to your style.less file and edit the following)

@a_color: #999;
@radius: 5px;

body {
  margin: 0;
  background-color: #fff;
  font: 11px normal Helvetica, Sans-serif;
}

#greetings {
  border: 1px solid @a_color;
  color: @a_color;
  border-radius: @radius;
  -moz-border-radius : @radius;
  -webkit-border-radius: @radius;
}

You’re done (you may look at the page now, but be aware you will not feel rewarded for your hard work…not yet). Now what did we do ?

@a_color: #999;

This is setting up a variable, called a_color (prefix with the character @ to indicate it’s a variable); then the writing is the same as for CSS : after naming your variable, use a colon and write down the value (it can be anything supported in CSS, such as : #ccc, 12px, none, etc. and it can even be another variable — we’ll see that later).

Then, in what looks just like a regular CSS file, you may write the variable instead of the value (which is really programming 101, but may seem new to some of you regarding CSS) :

border: 1px solid @a_color;

means exactly

border: 1px solid #999;

More variables

Let’s now make it a bit better. We have now figured out that we probably won’t be using the same color for the body background and the greetings background; however, the greetings background color should, somehow, be related to the text and border color; moreover, the greetings div should be smaller (right now, it’s page wide); also, the radius of the corners of the greetings box should be related to the text size…and to the padding…etc.

Empty the content your style.less file and let’s try the following :

@main_color: #000;
@second_color: #999;
@background_color: #ccc;
@font_size:12px;
@radius: 6px;
@padding: 12px;

body {
  margin: 0;
  background-color: @background_color;
  font: @font_size normal Helvetica, Sans-serif;
}

#greetings {
  margin: 100px auto; /* 100px from the top, horizontally centered */
  width: 300px;       /* why not ? */
  padding: @padding;
  border: 1px solid @main_color;
  color: @main_color;
  border-radius: @radius;
  -moz-border-radius : @radius;
  -webkit-border-radius: @radius;
  background-color: @second_color;
}

The content is quite self-explanatory, and the result looks just like that :

Simple Less project using simple variables

We almost did what we said we would, but not completely : we didn’t create any relationship between variables; so let’s just change the first lines of style.less (the variables declarations) into that :

@main_color: #000;
@font_size:12px;

@second_color: @main_color + (.6 * #fff);
@background_color: @main_color + (.8 * #fff);
@radius: @font_size/2;
@padding: @font_size;

It roughly didn’t change anything, and you’d better believe it : you may now add, multiply, divide (watch out for the per zero division), subtract colors, lengths, etc.

To get what we’re doing, just change the first two lines now, for example into :

@main_color: #6a5199;
@font_size:26px;

Watch the difference :

Second simple project using less variables

 

In the next topic, we’ll talk about nesting information within Less files.

Les commentaires sont fermés.