Learn about PostCSS! A new way to design and code with CSS you're going to love.

Every so often, a new tool changes the status quo and makes doing your job a lot more fun. First, there was Sass, Less and now, there's a new kid in town called PostCSS. It's changing how web designers and developers work. In this article, I'll show you what the fuss is all about and why you'll fall in love with this process, plus, I'll show you some videos of PostCSS in action from a couple of my lynda.com courses.

The reason that PostCSS and other tools are needed is because of the limitations in the CSS language itself. It's great for writing rules that target document selectors, classes and IDs, but it's somewhat inflexible. For example, if you wanted to use the same color over and over throughout your CSS file, the version of CSS supported in most current browsers does not support variables, so you end up typing the same color over and over. Plus if you want to update the color throughout your site, you end up having to update the same code in a bunch of places.

Tools like Less and Sass give you the ability to create constructs like variables, import css into a current stylesheet (without making an additional server call), mixins (like javascript functions), math and color operations. A lot of professional developers made the switch from developing with plain CSS to a language like Sass and Less, which then converts to a CSS file.

And the winner is...

For a long time, a war of sorts existed between Less and Sass, the two leading pre-processors for CSS. Chris Coyier of CSS-Tricks wrote a great article where he compared Sass and Less and his final conclusion was that Sass was a slightly better tool. However, Bootstrap 3 was built with Less, and since that's the most popular front-end framework in the world, there was still a bit of a fight left in Less...until late in 2015 Mark Otto, Director of Design at Github's and one of the lead developers for Bootstrap dropped this bombshell.

Scss is one of the flavors that Sass is written in, so this effectively buried Less as an option in my book and gave the decision of the ruling pre-processor tool to Sass, but it also made me notice PostCSS.

PostCSS' Rising Popularity

PostCSS started out as a tool for dealing with one of the most pesky problems web developers have to handle. How to write CSS code that works in older browsers (mainly Internet Explorer). The traditional way meant checking a website like CanIUse to verify which CSS features worked with wich browsers. The first versions of what's now PostCSS automated this process by creating a plugin that checked the CanIUse site for you and automatically adding the proper prefixes. This plugin was called AutoPrefixer and quickly became the best way to handle this task. Eventually, AutoPrefixer became just a plugin of a much larger engine that allows you to do a number of transformations.

Why it's a better solution

So, if Sass won the pre-processor battle and you've invested some time learning it, what's so great about PostCSS. First, it's not really a pre-processor. It's an engine for transforming CSS code using JavaScript. That means that you can do more than just transform your CSS files, you can feed it HTML documents, JavaScript or anything else for parsing...and it doesn't have to pre-process these, it can also post-process files.

Post-processing

With something like Sass, you write code with a language that only looks like CSS, but eventually that language gets converted into a CSS document. With PostCSS, you can simply take an existing CSS document and make modifications to it without first having to use another language. Autoprefixer makes working with something like Flexbox painless (and trust me without it, dealing with the different prefixes is pure agony).

It's insanely fast...and modular

This tool is really fast, but the reason for that speed is what's interesting. There's two ways to work with Sass. If you want the latest and greatest features you're going to want to work with the version of Sass that's written in Ruby. That means that you might end up having to install Ruby, keep your Gems up to date and when Sass runs, it runs as a ruby process. That makes Ruby Sass very slow. You won't notice it at first, but as your projects get bigger and bigger that lack of speed becomes more obvious...and annoying.

PostCSS is faster than CSS. First because it uses NodeJS, so you don't have to run things through Ruby. Although there is a version of Sass that runs in a similar manner, PostCSS is still faster. But the other reason it can be much faster is that it is modular. When you install something like Sass, you're installing the entire library, no matter how much of it you need. When you work with PostCSS, you end up installing only the features that you want, which also contributes to the application's overall speed.

Using only what you need

Let's say for example that you're interested in adding math functions so that you can build your media queries a lot easier (see video above). You install just the plugin that gives you that ability or you can install a pack of plugins that let you work with next generation CSS featuresin current browsers called PreCSS.

Or, what if you want an easier way to work with keyframe animations in your CSS. You can load up a library of pre-built animations through another plugin called PostCSS Animation. That tool creates all of the keyframes for your and is based on a library called Animate.css.

Making the transition

Learning something new is tough, but thankfully PostCSS is easy to add to what you already know about CSS. At it's most basic, it's as easy as writing the CSS you're already writing and not worrying about prefixing your code anymore with the AutoPrefixer plugin. If you're coming from a Sass background, there is a version of the tool that gives you most of Sass' feature set called PreCSS. But here's the thing, you don't have to use it if you don't want to...you can keep on using Sass and add only the PostCSS features you want. There are already more than 200 plugins and the list is growing rapidly.

One of the challenges you'll face when transitioning is that the tool can be installed in a lot of different ways using many build tools likeGrunt, Gulp, Webpack and more. Even then, the way you configure and install PostCSS varies a bit.

Need help getting started?

If you want a quick step by step guide on how to set things up and what it can do for you, then check out my course PostCSS: First Look. This is a quick guide in less than 50 minutes where I show you how to set things up and how adding different plugins works. If you haven't made up your mind yet, this is the course for you. There's a Github repo for this course, so you can get the files and play around with things yourself. That way you can have a nice template to fork from to start your own projects and see if it's the right tool for you.

Moving from Sass?

If you're coming from Sass and what to see what building a real site with PostCSS feels like, then check out Building a Responsive Single-Page Design with PostCSS. I show you how to work with PreCSS, CSSNext and CSS Animate to create a single page responsive layout using Flexbox. PreCSS is a lot like Sass, so you get all of the things you love about Sass including mixins, variables, conditionals, nesting. That makes learning a PostCSS based workflow a lot easier.  You can also check out the github repo for the course, which has a great GulpJS process that you can fork as a template for your own work.