An introduction to PostCSS

Before diving straight into PostCSS it is first necessary to look at CSS processing in general. Processors like Less, Sass and Stylus allow you to start re-using CSS properties and patterns, keeping stylesheets DRY and easier to maintain. Each preprocessor has a slightly different syntax but all support the original vanilla CSS syntax as well.

Benefits of Pre Processors

  • Fewer HTTP requests with the use of @import.
  • Re-usable properties with variables.
  • modular code blocks.
  • Re-usable patterns with mixins.
  • Scalable projects.
  • Maintainable code.

So why change now?

Despite the advantages listed above, numerous disadvantages have emerged from the mis-use of Pre processors. Each language comes with numerous features (Extends, Functions, Mixins, Variables, Nesting) some more harmful then others. In each case it is not possible to restrict usage of an offending feature, making codebases harder to maintain and keep clean.

Disadvantages of Pre Processors

  • Bloated stylesheets.
  • Overly specific selectors created from excessive nesting.
  • Confusing or overly complicated mixins and functions.
  • Excessive config.

What is PostCSS?

PostCSS makes it possible to transform and extend the features of CSS using JavaScript plugins. Each plugin is installed individually allowing teams to create there own processors with the exact features they need and nothing more. This allows developers to take much greater control over the features used and as a result the output CSS.

Syntax sugar

PostCSS has plugins available to replicate all of the features developers have become accustomed to with pre processors. Variables, Mixins, Functions, Extends and even Nesting can be accomplished with existing plugins…

  • postcss-mixins – Enables mixins more powerful than Sass.
  • postcss-nested – Unwraps nested rules.
  • postcss-simple-extend – Lightweight extending of silent classes, like Sass’ @extend.
  • postcss-simple-vars – Support for Sass-style variables.
  • postcss-nested-vars – Supports nested Sass-style variables.
  • postcss-precss – Plugin pack that allows you to use Sass-like CSS.

Maintainable CSS

PostCSS offers more then just the syntax changes associated with Sass, Less and Stylus. With PostCSS you can also extend the functionality of CSS and begin to tackle some of the languages shortcomings.

“…the single hardest problem in CSS: Getting your rules to match the elements you want, without them accidentally
matching the elements you don’t.”

Quotes like the one above accurately sum up the struggles all developers have had with CSS inheritance, scope and specificity, with PostCSS these issues and more can be resolved. There are also plugins to help with readability, linting and implementing the latest CSS properties safely.

  • postcss-use – Enable PostCSS plugins directly in your stylesheet.
  • postcss-modules – Allows to use CSS Modules everywhere.
  • postcss-autoreset – Automatically adds reset styles.
  • postcss-cssnext – Plugin pack that allows you to use future CSS features today.
  • cq-prolyfill – Adds support for CSS container queries (aka elementqueries).

Customisable

Because PostCSS uses Javascript to transform CSS, it is much more accessible for front end developers to create their own plugins. Projects can therefore be customised to create the optimum workflow with no limitations or boundaries set by language choices.

Plugins can be created for any CSS task large or small, a collection of current plugins can be found here.

Why use PostCSS?

PostCSS has many benefits when compared to other CSS processors, including speed, performance, adaptability and innovation. Perhaps its biggest advantage though is that it is not attempting to compete with these languages and can instead be used alongside them.

To begin using PostCSS you do not have to abandon your current front end set up and can continue to use the Functions, Mixins and Variables you already have, whatever language they are in. This allows the more forward thinking PostCSS plugins to be added to legacy projects, not just new builds.

Benefits

  • Use tomorrow’s CSS syntax, today.
  • Easy to contribute to in the form of custom plugins.
  • More control over the features used.
  • Faster compile times.

Getting started

Another plus point for PostCSS is the ease with which it can be integrated into your current workflow. PostCSS has a JavaScript API and integrates seamlessly with task runners like Gulp, Grunt and webpack.

JS API

var postcss = require('postcss');
postcss([ require('autoprefixer'), require('cssnano') ])
.process(css, { from: 'src/app.css', to: 'app.css' })
.then(function (result) {
fs.writeFileSync('app.css', result.css);
if ( result.map ) fs.writeFileSync('app.css.map', result.map);
});

Gulp

gulp.task('css', function () {
var postcss = require('gulp-postcss');
var sourcemaps = require('gulp-sourcemaps');

return gulp.src('src/**/*.css')
.pipe( sourcemaps.init() )
.pipe( postcss([ require('autoprefixer'), require('precss') ]) )
.pipe( sourcemaps.write('.') )
.pipe( gulp.dest('build/') );
});

PostCSS also has a command line interface available for those who don’t wish to use a task runner. By installing postcss-cli CSS can be compiled with the following command…

postcss -c config.json -o result.css input.css

Demonstration

To demonstrate how PostCSS works we will look at the simple PostCSS Clearfix plugin. The plugin adds ‘fix’ and ‘fix-legacy’ values to the clear property.

With the plugin installed you can set the clear property to ‘fix’ or ‘fix-legacy’ depending on your level of browser support.

.foo {
clear: fix; /* IE8+ */
}

.bar {
clear: fix-legacy; /* IE6+ */
}

The CSS above would compile to…

.foo:after{
content: '';
display: block;
clear: both;
}

.bar:before,
.bar:after {
content: '';
display: table;
}
.bar:after {
clear: both;
}
.bar {
zoom: 1;
}

The plugin iterates through each declaration in the input CSS file matching values of fix of fix-legacy. In the output CSS these declarations are removed and replaced with the relevant CSS.

Author cathydutton

More posts by cathydutton

Join the discussion 4 Comments

  • You can still use Sass or Less and add post-css on top. It’s the way it makes most sense for existing projects.

    The listed disadvantages for the preprocessors are not part of the tool, are disadvantages of the developers using the tools:

    * Bloated stylesheets. (dev responsibility)
    * Overly specific selectors created from excessive nesting? (devs fault)
    * Confusing or overly complicated mixins and functions. (devs fault)
    * Excessive config. (it can get worse with postCSS)

    Having said that, I’m adopting postCSS with and without Sass to test it in a new project and in an old one.
    I wrote about Sass + PostCSS here: http://code.medula.cl/article_Getting-back-up-to-speed-with-CSS-tooling.html (sorry for the plug)

    • Cathy Dutton says:

      I completely agree a lot of the problems created by Sass (or less) are developer issues. PostCSS allows you to police these things much better though. A big plus point of PostCSS is the fact that you don’t have to re-do your current mixins, functions etc. I would always recommend starting out by adding PostCSS to an existing workflow and phasing out other tools over time if at all. I wrote a post along these lines on my own website a few weeks back…

      http://cathydutton.co.uk/10-reasons-to-start-using-PostCSS-today.html

  • hexx says:

    postcss with cssnext is very nice especially now that css-variables (custom properties) are candidate recommendation and are implemented in some browsers (FF leading by a large margin).

    I implemented cssnext with postcss over 15 months ago and since then used in production on quite high traffic website – we’ve never had any issues

  • […] An introduction to PostCSS **I’m still trying to wrap my head around this […]

Leave a Reply

%d bloggers like this: