Treehouse

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

ydkjs-2.png

Recent Features

  • 6 Things You Didn’t Know About Firefox OS

    Firefox OS is all over the tech news and for good reason:  Mozilla's finally given web developers the platform that they need to create apps the way they've been creating them for years -- with CSS, HTML, and JavaScript.  Firefox OS has been rapidly improving,...

  • Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() – this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

Incredible Demos

  • jQuery topLink Plugin

    Last week I released a snippet of code for MooTools that allowed you to fade in and out a "to the top" link on any page. Here's how to implement that functionality using jQuery. The XHTML A simple link. The CSS A little CSS for position and style. The jQuery...

  • Select Dropdowns, MooTools, and CSS Print

    I know I've harped on this over and over again but it's important to enhance pages for print. You can do some things using simple CSS but today's post features MooTools and jQuery. We'll be taking the options of a SELECT element and generating...

Discussion

  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!