Chris Coyier: Perspective of a Preprocessor, About a Year In

By  on  

I've been using CSS preprocessors for about a year now. I gave all of them a try. LESS first, then Stylus, then Sass. All on real projects, not just poking around and tinkering with syntax. They are all pretty good. The truth is, developer to developer, I don't really care if you use one or not or which one. I don't care in the same way I don't care if you use Dreamweaver as your code editor or a PC as your computer. I personally don't want to use those things, but if you're productive in doing so, more power to you. Mostly I just want you to build good websites.

But If you ask me if I think CSS preprocessors are worth learning, incorporating into your workflow, and what my favorite is, I'd tell you: yes, yes, and Sass with Compass.

The following is my perspective on the features of preprocessors and how I feel about them after about a year of use. Instead of just telling you what they do, I'm going to tell you why they matter to me and my workflow.

Variables. They Save You From Yourself.

I could tell about how variables help make your code DRY. I could tell you how about how it's cool that you can change them once and it changes the value everywhere. But you know that.

The real reason variables make a difference for me authoring styles is that they save me from myself. When my brain thinks "I need blue here", I type "$blue". In the past I might have opened up Photoshop and tried to use the colorpicker on some tiny element somewhere on the screen and ended up with some close-but-not-quite right blue. This is the kind of dumbheaded stuff we're all guilty of sometimes and has real negative impact on designs.

Now when I need a color, I make sure it's set up as a variable and use the variable. It makes me quicker and more consistent. And I don't get too clever with it either. I name blue $blue and orange $orange. If I called it $mainLinkColor and $primaryBrand I wouldn't remember my own cleverness and the benefit would be gone.

Mixins. Stop Screwing Up CSS3.

I could tell you how mixins are like functions and help keep your code DRY. I could tell you how updating your mixins can help you make sweeping changes much easier in your code. But you already know that.

The real reason mixins are valuable to me is they keep from from screwing up CSS3. Point me at just about any website on the internet using any CSS3 and I bet we could something incorrect they doing with CSS3. Missing vendor prefixes. Out of order prefixes. Incorrect syntax usage. Not using older syntaxes when needed. This stuff is complicated and a moving target.

Sass has Compass and Compass provides us with the best possible output for CSS3 features. I'm a bit of a CSS nerd. I kind of enjoy knowing and teaching the latest and greatest CSS to use. But even I grow weary of this prefix situation. It's neither fun nor practical to keep all my projects updated to the latest and greatest at all times by hand. With Compass I don't have to.

Automating Tasks Otherwise Impractical To Do By Hand

Some of these thing might sound like mighty nice conveniences. But I think CSS preprocessing gets out of the realm of convenient and into the realm of required when it helps with tasks that are completely impractical to do manually.

Example 1: You can set $experimental-support-for-svg: true; and now when you use the background() @mixin for a gradient, it will produce and data URI SVG gradient as well. That means IE 9 support for gradients. For nearly zero work. That's a pretty big deal.

Example 2: You can @import files into other files. Unlike native CSS, this actually compiles them together in the CSS output. Like a server side include. This means you can compress and concatenate arbitrary files together. This means you can work in whatever organizational scheme you want to, matching however your brain works not how any given technology wants you to. It's pretty impractical to do all this concatenation and compression by hand.

Example 3: Learn about spriting with Compass. It's pretty dang amazing how little work you need to do.

Nesting. The Feel Good Feature.

When I go back and write regular CSS (which I'm not afraid to do and I think we all should once in a while), the feature I miss the most is nesting. Every time I have to write stuff a repetative selector, like:

.module ul {}
.module li {}
.module a {}

I feel like this.

The Most Important Thing

CSS preprocessing makes CSS fun again. If you write enough plain CSS, it wears on you. I absolutely love the power of CSS. I love working with CSS. I love making things with CSS. But I tire of all the tedious stuff. I want to work faster and more efficiently. That's what CSS preprocessors really do. The have made working with CSS rewarding to me again and that's why they matter.

Chris Coyier

About Chris Coyier

Designer at CodePen. Writer at CSS-Tricks. Podcaster at ShopTalk

Recent Features

Incredible Demos

  • By
    Save Web Form Content Using Control + S

    We've all used word processing applications like Microsoft Word and if there's one thing they've taught you it's that you need to save every few seconds in anticipation of the inevitable crash. WordPress has mimicked this functionality within their WYSIWYG editor and I use it...

  • By
    Create a Photo Stack Effect with Pure CSS Animations or MooTools

    My favorite technological piece of Google Plus is its image upload and display handling.  You can drag the images from your OS right into a browser's DIV element, the images upload right before your eyes, and the albums page displays a sexy photo deck animation...


  1. Helpful and personal overview, good stuff!

    Spelling mistake “The real reason mixins are valable to me …”

  2. I cannot imagine my life without preprocessors these days.

    One thing I have noticed is that my CSS files grow in size significantly because I do use selector nesting and more CSS3 features (because it’s so dang easy). For example, an increase of 71kb of unzipped CSS ends up being just 10kb difference when zipped. Not bad.

  3. Great post, couldn’t agree more about everything Chris said. One of the most important features to me is using the @import functionality to make my code more modular. With it, I can break out media query CSS, utility CSS, base CSS, etc into their own files. It makes finding things easier and faster!

  4. Andrey

    Thanks for this writing. I choose SASS and Compass too. I love them for sprites and better handling of media queries (compare to LESS). Compass has big reference for which I use this site:

  5. Cheers for the link to the video that outlines compass sprites! That’s a great help.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!