PostCSS Mythbusting: Four PostCSS Myths Busted

With the introduction of any new front-end tool, there comes the important questions with regard to its potential value in an already congested marketplace. Does it offer developers anything new? Is it going to be worth investing the time and effort to learn and implement it?

Since its inception, PostCSS has faced an interesting problem. With it vying for attention in a reasonably mature area alongside established CSS tooling such as Sass and Less, there have been a number of misconceptions made relating to its categorization and use.

So let’s address some of the most common myths around PostCSS and in doing so show how it can enhance your workflow and improve how you work with CSS.

N.B. If you want to find out more about what PostCSS actually is and how to set it up, check out this introduction to PostCSS and then come back here for some mythbusting!

Myth 1 – PostCSS is a Pre or a Postprocessor

Let’s start with perhaps the biggest point of confusion relating to PostCSS.

When PostCSS was first released, it was promoted and categorized as being a ‘Postprocessor’. Many of the first PostCSS plugins took valid CSS and extended it in some way, rather than the previously familiar approach taken by preprocessors of taking custom syntax and compiling it into valid CSS.

To call PostCSS a postprocessor is somewhat misguided and actually plays down its capabilities. I prefer to refer to it simply as a CSS Processor, as it can perform a number of different tasks, using PostCSS plugins, at several points in your CSS authoring process.

A number of PostCSS plugins take custom syntax and convert it into valid CSS, as you would associate with a conventional preprocessor like Sass. One such example would be the PostCSS Nested plugin which lets you nest selectors – in the same way that Sass and Less implement selector nesting. Other PostCSS plugins take valid CSS and extend it, such as PostCSS’s most well-known plugin, Autoprefixer, which adds vendor prefixes automatically to your stylesheet.

Some PostCSS plugins don’t actually transform your CSS at all, but instead provide useful insights into your styles. Stylelint can be used to lint your CSS, while a plugin like Colorguard can help you to maintain a consistent color palette across a project.

In addition to all of this, PostCSS can parse SCSS syntax as well as standard CSS. This means that you can extend your Sass .scss files with PostCSS plugins – something which we will go into in more detail in Myth 2.

So to bust our first myth — PostCSS is neither a Pre or a Post–processor. It is a CSS Processor that can extend or report on your styles at a number of different points in your workflow.

Myth 2 – PostCSS Is an Alternative to Preprocessors like Sass and Less

A common misconception among developers is to compare PostCSS as an alternative to already existing preprocessing tools such as Sass and Less.

I believe this to be down to the fact that a number of the first PostCSS plugins focused on emulating features commonly seen in preprocessors, such as variables, conditionals, loops and mixins. As the PostCSS community has grown, a much more diverse range of plugins has emerged, offering a number of features that differentiate it from traditional preprocessors.

So although you could use PostCSS as an alternative to using a preprocessor like Sass or Less, you could alternatively power-up your existing toolset by extending the features of your favourite preprocessor.

PostCSS is capable of parsing both CSS and SCSS syntax, which means that you can use PostCSS plugins to transform your styles both before and after your Sass compilation step. For example, on a current project I use PostCSS to lint my Sass files using Stylelint before it is compiled into CSS. The resulting CSS is then extended with plugins like Autoprefixer and postcss-assets to add vendor prefixes and inline image assets as data URIs. So your workflow could look something like this:

Ultimately, how you choose to use PostCSS is up to you. If you want to use it as your sole CSS processing tool, you can certainly do that. But if you’re perfectly happy using Sass or Less, consider that PostCSS is equally capable of working alongside those tools to provide additional features that your preprocessor cannot.

Continue reading %PostCSS Mythbusting: Four PostCSS Myths Busted%

by Ashley Nolan via SitePoint