A Quick Look into PostCSS

After hearing some buzz about PostCSS I decided to learn more about it.

PostCSS is a CSS parser written in JavaScript. It’s core its small, but its power comes from its modules. It gives you control on how your CSS will export.

Autoprefixer its the most popular module for PostCSS. It parses your CSS and adds browser prefixes based on CanIUse stats. Some available modules bring CSS level 4 features or fallback features for older browsers. Other modules can optimize your CSS or bring preprocessor-like features. But there is also “for fun” features like using British English in your CSS (I know you want to use colour). If none of the modules meet your needs, you can write your own module.

PostCSS is not a replacement for your Preprocessors just yet. You have to decide early in development what PostCSS modules are going to improve your workflow. That is where you will get the most out of PostCSS.

I created a simple PostCSS starter kit for you to tinker with. There are starting points to take a look, cssnext and preprocessor-like.

cssnext provides the modules and a baseline CSS featuring future CSS features. The intent is for source file to work in future browsers. It uses the cssnext module.

Preprocessor-like brings features adopted from Sass or Less to the CSS file.

You can always test in the CSSNext Playground. You can read more on David Clarks post.