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

O'Reilly Velocity Conference
Save 20% with discount code AFF20

Recent Features

  • fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

  • Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

Incredible Demos

  • MooTools CountDown Plugin

    There are numerous websites around the internet, RapidShare for example, that make you wait an allotted amount of time before presenting you with your reward. Using MooTools, I've created a CountDown plugin that allows you to easily implement a similar system. The MooTools JavaScript The CountDown class...

  • Send Email Notifications for Broken Images Using jQuery AJAX

    It's usually best to repair broken image paths as soon as possible because they can damage a website's credibility. And even worse is having a user tell you about it. Using jQuery and PHP, you can have your page automatically notify you of broken...


  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: http://compass.aether.ru/

  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!

Recently on David Walsh Blog

  • Prevent Chrome from Translating a Page

    A while back I shared my favorite Google Chrome extension:  Google Art Project.  I've enjoyed seeing beautiful art when I open a new tab -- it's brought genuine happiness to my day, however small that happiness may be.  About a week ago, however, the art presented had...

  • Create Any Type Of Website With These Multi-Purpose Themes

    We have selected what we believe are the very best multipurpose WordPress themes on the market today. Our list contains a number of best sellers, several newcomers that are proving to be highly popular, and a few themes that are ideal for creating the types of...

  • An Introduction to Static Site Generators

    Static site generators seem to have been becoming more and more popular recently, but they’re not one of those ephemeral novelty things that grow in popularity as quickly as they fall into oblivion shortly after. For over a decade, many different projects — 394 of...

  • Automated Tests for Visual Responsive Layouts

    Today it's all about testing. In 2015, many developers knows about TDD and I personally think that testing is one of the key for quality products. But what about testing in a Front-end environment? How do you guys write your tests for a responsive page or...

  • Getting Dicey With Flexbox

    What if you could build complex CSS layouts in minutes? Flexbox is a new CSS layout spec that makes it easy to construct dynamic layouts. With flexbox, vertical centering, same-height columns, reordering, and direction agnosticism are a piece of cake. There's a popular myth floating around that...