Why I’m a CSS-preprocessor Fanboy

I got a great question in my comments section about how Scaffold, a CSS-preprocessor, helps me keep my HTML free of non-semantic grid classes. This seems like a good time to discuss generally why, despite my initial skepticism, I’ve become a big fan of CSS-preprocessors, such as SASS, LESS, and Scaffold.

So what exactly is a CSS-preprocessor?

Despite having somewhat of a weird name, CSS-preprocessors are fairly simple to understand. You, as a front-end dev, write code that looks pretty much like CSS, with some extra goodies that make your code shorter and easier to read. Then, you run it through a CSS-preprocessor, and it transforms, or preprocesses, your “pretty much” CSS into real, bonafied CSS that runs in all your favorite browsers, like Internet Explorer 5 for Mac.

Perhaps the best way to explain what CSS-preprocessors do is through a short code demonstration, taken from the SASS website.

/* SASS Code */
table.hl {
  margin: 2em 0;

  td.ln {
    text-align: right;
  }
}

li {
  font: {
    family: serif;
    weight: bold;
    size: 1.2em;
  }
}

Then, you run it through SASS, and get the following CSS:

/* CSS  Output */
table.hl {
  margin: 2em 0;
}
table.hl td.ln {
  text-align: right;
}

li {
  font-family: serif;
  font-weight: bold;
  font-size: 1.2em;
}

As you can see, instead of having to spell out long selectors over and over yourself, you can simply nest selectors. SASS, LESS, and Scaffold all behave the same way in this case, and can detect your nesting. Then, they spell out the long selector names for you, as shown above. I find this feature alone makes my CSS more readable and quicker to develop.

In addition, CSS-preprocessors offer other helpful features like mixins, variables, and importing. What’s best is when you combine all of these features together, you can not only make your styles easier to read, but also create a better separation between style and content, making your site easier to maintain. This is perhaps my favorite feature of CSS-preprocessors.

How CSS-preprocessors help the separation of style and content

With 960, you link to the grid stylesheet and then place classes such as “grid_4″ throughout your HTML. In my opinion, these classes are presentational, not semantic, and are therefore best left within your CSS to maximize your separation of style from content.

960 Style

To create a site with 12 columns using 960.gs, featuring a main content area and sidebar (similar to the setup of most blogs), the code would look something like this:

<div id="content" class="grid_8">CONTENT HERE</div>
<div id="sidebar" class="grid_4">SIDEBAR HERE</div>
<link href="960.gs" />

Scaffold Style

HTML

<div id="content">CONTENT HERE</div>
<div id="sidebar">SIDEBAR HERE</div>
<link href="styles.css" />
<-- Yay no grid classes! -->

styles.css – Scaffold Code

@grid
{
  grid-width: 960;
  right-gutter-width: 10;
  left-gutter-width: 10;
  column-count: 12;
  baseline: 18;
}
#content {
  +columns(8);
}
#sidebar {
  +columns(4);
}

Scaffold Output (what would be seen by your browser)

#content {
  width: 600px;
  margin: 0 10px;
  float: left;
}
#sidebar {
  width: 300px;
  margin: 0 10px;
  float: left;
}

As you can see from the Scaffold Code, you declare a grid and then Scaffold generates a series of “mixins” you can use throughout your CSS, such as “+columns(8);” or “+push(4);”. SASS and LESS have ways of emulating this functionality as well. They take those mixins, and turn them into good ol’ CSS. This means you can keep your HTML free of those crazy grid classes, and from my experience, it makes maintaining your grid much easier in the long run.

The watch feature

One standout feature I also have to mention is the “watch” feature. While this is available for SASS and Scaffold, I feel the newest version of LESS, written in JavaScript, has the best implementation. What does it do? For this one, I think a demonstration is in order:

One thing I forgot to mention in the screencast, and why I prefer the LESS.js watch feature to almost any other solution: It works in all browsers. With two monitors, I can hack away in my editor, and make sure that my CSS is working in Chrome, Firefox, and IE on the fly. Truly amazing. And you can learn more about LESS.js by reading the following article: Less.js Will Obsolete CSS

Drawbacks of CSS-preprocessors

Now, while I love me some CSS-proprocessors, they do have some drawbacks. First of all, while they save time, they also take a bit of time to learn and get comfortable with. This is a tradeoff I think is well worth it in the long run, but other reasonable people may disagree.

Second, while I really like a lot of things about Scaffold, I’ve felt it is very clunky in some ways. For example, it won’t render your CSS at all if you’re simply missing an image referenced within your Scaffold CSS. You can adjust the error level to correct this, but it’s not an ideal solution. Scaffold is currently undergoing a full rewrite, which will hopefully give it a smoother experience in general.

Third, I think CSS-preprocessors can encourage over-nesting, which causes styles to be a bit too specific and therefore not as reusable. Although refactoring is a part of any coding exercise, I think premature nesting is something to be watched out for with CSS-preprocessors because they just make it so darn easy to do.

Finally, I think the overall code size may be something to examine. While being able to use the grid mixins may result in less code if you’re only using them a couple or few times, if you need to use a ton of grid mixins, I worry code may actually bloat. This hasn’t been as big an issue for me, but it’s something to consider.

Final words

I recommend keeping an open mind and looking at what each has to offer, then deciding for yourself what to choose. Since I’m an opinionated loudmouth, I’ll just tell you my current favorite is LESS.js because I’m a JavaScript junkie. But I love SASS syntax, and the grid system in Scaffold is awesome. They all have their strengths and weaknesses, so play around with em a bit! You’ll love em too.