Meet PostCSS

Future of CSS after preprocessors

PART I

Why should we even compile our css?

To use (and invent) new things now, without waiting for standardization

Standards coming up very slow, and browsers sometimes just afraid to support new technologies

To make your styles more flexible, modular and manageable

Good structuring makes it possible to easily support even large and comlicated projects

To work better and smarter, use best practise from programming languages

«Do not repeat yourself», metaprogramming and some other techniques that you use in programming can also be used in css

PART II

So, people invent preprocessors...

Here is an idea of preprocessors like SASS, LESS or Stilys: you write your styles using smart "almost-css" with mixins and some other improvements, and then preprocessor converts it to classic CSS when you finish. That's how it works:

... but they have some huge disadvantages:

They are
really, really
slow

Compiling styles takes a few
seconds — every time you do it

What they provide you is not actually a programming language

Preprocessors help to avoid weaknesses of CSS, but going a bit further you discover weaknesses of their own syntax

They give you more, but they don't give you
freedom

You have more options than in plain CSS, but still a lot of things can not be done by the preprocessors.

PART III

And here come postprocessors

So, how do postprocessor work? It contains two main parts. First is parser, which converts input CSS to node tree and send it to plugins. Second — saving module, which save the node tree back to CSS, like this:
First postprocessor was Rework, then comes up PostCSS
All of the style transformations are performed by plugins, which are plain JS functions. Each plugin receives a CSS node tree, transforms it & then transfers the modified tree to next one.

Everything in between is completely up to you — you can choose which plugins to use, or even decide to write your own, using javascript.

PART IV

Let's look at some examples

So, you can use postCSS in different ways, depending on which plugin you choose to use. For example, you can automatically take care of the necessary prefixes using autoprefixser:
You can also use advanced syntax for writing your CSS. Choose to use all features of Sass-like markup using preCSS plugin...
... or use something more radical, like PostCSS Crip:
But wait, why there is "or"? You can actually use both of them, if you want to. Completely up to you. Freedom!
Use a small plug-ins for very specific tasks, such as the easy creation of triangles:
You can even use postCSS to receive more information about your styles, for example, by using Doiuse plugin:
And, of course, you can always write your own plugin if you have not found, or are not happy with the existing one

So, once again — here are best features of PostCSS:

It is remarkably
fast

PostCSS is about 5 times
faster, than Stilys

It allows you to use the best programming practices

Рreprocessors syntax can no longer restrict you, because you'll write your plugins on pure JS

Modular structure provides freedom to try and combine any ideas

Use existing plugins, modify them or write new ones, depending on your needs and desires

But here is coolest part:

If you are interested in PostCSS, but you're not quite ready to leave your preprocessor in the past, you can use them together. Start with autoprefixser and a couple of other useful plugins to get familiar with PostCSS, while your preprocessor works just like before.

PART V

Why does it matter

We believe that the best way to develop technology is
evolution
It means there is an opportunity to give a try to any, even the most unthinkable idea. Bad ideas will rest in peace, because no one will want to use them, and good ideas will be inherited, because everyone will start using them.

Neither of browsers or W3C can't provide it that way, but PostCSS can. And that's why PostCSS is not just a postprocessor, but future of the CSS.

PART VI

So... give it a try!

Join on GitHub

PostCSS is an open source project, and you are very welcome to join the community on GitHub.

We hope that now you are interested in this wonderful technology and take a time to look at our page on GitHub. There you'll find detailed instructions on how to set up and start using it in your projects.

Follow in social media

Also, you can follow PostCSS in social media to always know about updates:

Twitter
Vkontakte
Gitter

Thanks for reading and

Join PostCSS on GitHub

Created by Vadim Pleshkov,
   Illustrations by Dana Khagabanova
Created by Vadim Pleshkov