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

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
.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.

About Chris Coyier

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

css-tricks.comchriscoyierPosts