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
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.
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.
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...
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.
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.
So... give it a try!
Read more about it
Here are some articles about using this technology:
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: