Ten Reasons You Should Be Using a CSS Preprocessor

Ten Reasons You Should Be Using a CSS Preprocessor

Chris Loos's picture

I started hearing about this CSS preprocessor stuff a couple of years ago. The concept intrigued me: Use special, supercharged CSS files that could contain variables, functions, "mixins", and other features. After development, these special files would then be compiled into regular CSS files that all web browsers could understand.

To my peril, I stayed away from CSS preprocessors until recently. "Why should I add another layer of complexity to my development workflow?" I thought. "I know what I'm doing with CSS. If it's not broken, don't fix it."

I finally saw the light last month at Drupalcon Denver. On a whim, I sat in on a Birds of a Feather session on Sass and Compass. It didn't take long to have an "a-ha" moment and realize "Gee, I should really be using this stuff". Like today.

Since then, I've been working with both Sass and Less, and both seem more than capable. I'm not going to use this space to compare one preprocessing language to another, or make a recommendation on one. I'll leave that to you. (If you're interested, there are plenty of articles out there to get you started). Rather, I'm going to keep this post general, and evangelize a bit on what's so darn good about the CSS preprocessor concept. And what better way to show you what's good about it, than with a top 10 list?

So without further ado, here's my 10 reasons you should consider using a CSS preprocessor:

1. It adds the stuff that should have been in CSS in the first place.

Lets face it- CSS is a dumb language. You target bits of your document with selectors, and you style them with properties. That's pretty much it. While this makes for a language that's approachable for novices and and designers without a computer programming background, it also makes for a less powerful language that constantly forces you to do things the long way.

Enter the CSS preprocessing language. With it, you can start using things like variables, mixins, and functions. It will allow you to start reusing properties and patterns over and over, after defining them just once. Which brings us to...

2. It will make your CSS dry.

DRY as in Don't repeat yourself (as opposed to WET, or Write everything twice). Don't repeat yourself is a core principal of computer programming, and its one that vanilla CSS throws under the bus. How many times have you typed something like this?

.large-heading {
   font-family:Helvetica, Arial, sans-serif;
   font-weight:bold;
   font-size:24px;
   text-transform:uppercase;
   line-height:1.2em;
   color:#ccc;
}

.med-heading {
   font-family:Helvetica, Arial, sans-serif;
   font-weight:bold;
   font-size:18px;
   text-transform:uppercase;
   line-height:1.2em;
color:#ccc;
}

.small-heading {
   font-family:Helvetica, Arial, sans-serif;
   font-weight:bold;
   font-size:14px;
   text-transform:uppercase;
   line-height:1.2em;
   color:#ccc;
}

Tedious, isn't it? Consider the same bit of code, written in Less:

.large-heading {
   font-family:Helvetica, Arial, sans-serif;
   font-weight:bold;
   font-size:24px;
   text-transform:uppercase;
   line-height:1.2em;
   color:#ccc;
}

.med-heading {
   .large-heading;
   font-size:18px;
}

.small-heading {
   .large-heading;
   font-size:14px;
}

Notice that nothing is repeated. Nifty, eh? This brings us to #3...

3. It will save you time.

Who couldn't use a little more free time? You'll be amazed at how much time you save when you aren't forced to write the same things over and over.

4. It will make your code easier to maintain.

Being able to use variables, mixins, and functions means you can define a value or group of values once at the beginning of your document, instead of through it, making it easier to make changes later. For instance, you could define your site's colors like this:

@maincolor: #4575D4;
@accentcolor: #FFA700;

And then use them like this:

a {@maincolor;}

primary-nav {background-color:@accentcolor;}

Even better, using functions, you can define new colors in terms of colors you have defined. Consider this use of the @maincolor variable we defined above:

a { color:@maincolor; }
a:hover{ color:lighten(@maincolor, 20%;}

We've created a rollover state for links that is @maincolor, except 20% lighter. If we want to go back and change the main link color later, the hover state will change accordingly.

5. It will make your CSS more organized.

Both Less and Sass support nested definitions. This is easiliy my favorite feature, as it keeps things so organized and it just MAKES SENSE. Once you start writing your css definitions this way, you realize how nonsensical and repetitive the old way made. Consider the following CSS definitions:

h1 {
    font-family:Arial,Helvetica,sans-serif;
    font-size:18px;
    font-weight:bold;
    line-height:1.2em;

    a {
        color:black;
       
        &:hover {text-decoration:none;}
    }
}

Doesn't that make much more sense than this?

h1 {
    font-family:Arial,Helvetica,sans-serif;
    font-size:18px;
    font-weight:bold;
    line-height:1.2em;
}

h1 a {color:black;}
h1 a:hover {text-decoration:none;}

6. It's easy to set up.

I dreaded the thought of adding another step to my development workflow. As it turns out, setting up preprocessor files for a project is surprisingly easy. With Sass, a simple command line command will instruct Sass to watch your Sass files, recompiling your CSS automatically every time you save your changes. Lately I've been using Less, which has an OS X app called Less.app that does the same thing but with a graphical user interface.

7. It will make your websites prettier.

Time not spent repeating yourself and maintaining unwieldy CSS code means more time to focus on stuff that will make your site shine. Use some of those spicy CSS3 properties you've been meaning to try! Spend a couple hours on extra details and polish!

8. It's easier to write than you think.

An avoidance of having to learn something new was another reason I shied away from CSS preprocessors for awhile. However, when I finally tried it, I quickly learned that it's easy to pick up. Both Less and Sass .scss files are strict supersets of CSS. This means that if you can write CSS, you already know how to write valid .less and .scss files. You can start writing these files right away on your next project, and pick up the extra stuff as you go without having to learn everything at once.

9. Frameworks that supercharge your CSS.

Frameworks built on top of CSS preprocessing languages do even more heavy lifting. For example, Compass- a framework built on top of Sass, automatically generates all those annoying vendor-specific CSS3 properties, has lots of useful functions for generating grids, sticky footers, and more. It can even generate a sprite sheet for you out of seperate images...how cool is that?

10. It's fun!

Seriously. So go out and try it today.

Comments

.large-heading, .med-heading, .small-heading {
font-family:Helvetica, Arial, sans-serif;
font-weight:bold;
font-size:24px;
text-transform:uppercase;
line-height:1.2em;
color:#ccc;
}
.med-heading {
font-size:18px;
}
.small-heading {
font-size:14px;
}

Chris Loos's picture

In the example I gave, I admit that your solution works just as well without using Less. There's always more than one way to skin a cat, so to speak!

There are other situations however, where Less saves quite a bit of code. I'd encourage you to try it.

I can't help to wonder, shouldn't there be a separate .heading { } declaration? Or is that actually a shorthand?

I think that in the first example, instead of .large-header, should be just header, right?

Chris Loos's picture

Good catch, fixed!

do you know how to include empty class and id from sass to result css? i don't find the answer anywhere and i just started using it, so struggling with it.

Thanks for sharing! I didn't know anything about pre-processors but now I now it is very important to give them a try!

Post new comment

About Urban Insight

We create elegant, mobile-friendly websites.
We solve complex problems using Drupal and open source software.
Learn More

Snippet

Extract files from a tar file (see x in the arguments).

$ tar -xvf foo.tar

Extract gz compressed tarball.

$ tar -xvzf foo.tar.gz
$ tar -xvzf foo.tgz

tar seems to work without z as well.

$ tar -xvf foo.tar.gz

Extract one file.

$ tar -xvzf foo.tgz onefile.php

Creat a tar file and zip it (see c in the arguments).
(tar allows arguments with no dash for historical reason)

$ tar cvzf foo.tgz *.php *.txt
$ tar cvzf foo.tgz mydirectory