My Top 5 PostCSS Plugins
September 15th, 2015
There has been a lot of talk recently about a new CSS preprocessor called PostCSS.1 PostCSS is a wrapper for plugins which exposes an easy to use, but powerful API. Plugins can then use this API to change something in your CSS – or not. This makes PostCSS modular and extensible. While it is possible to replicate other preprocessors features, PostCSS can do so much more.
Using PostCSS is as easy as including it into your build system. There are integrations with all the popular ones, so there is no excuse not to use it. The harder part is choosing from the wealth of plugins. PostCSS.parts helps searching for features you want to add to your CSS.
To get you started with PostCSS, here are my must-have plugins for every project:
postcss-simple-varsVariables and inlined
@importstylesheets were my number one most used Sass features. They improve style consistency and code structure and make modular thinking easier. The first thing I did was search for a suitable replacement for these features.
postcss-simple-varsreplicate the functionality perfectly, so they are a definite must-have.
postcss-focusWherever you use a
:hoverin your CSS, you should add a
:focusas well.2 To make sure I do not forget to add it,
postcss-focustakes care of adding it for me.
autoprefixerMaking sure your page looks the same no matter which browser/device it is viewed on is very important today. Vendor prefixes and browser fallbacks are a big part of doing that. Sadly, there are a lot of them and I tend to forget them.
autoprefixertakes care of prefixing your CSS based on browser usage data. This means you can focus on the styling, and let
autoprefixertake care of cross-platform quirks.
doiuseYou might have certain browser versions you want to support on your website.
doiusechecks your CSS and warns you if you use a feature that is not supported by the minimum browser support you specify.
cssnanoOptimising your CSS is vital. Performance is a big topic around the front-end development world, and delivering the least amount of data possible is crucial.
cssnanois a collection of various PostCSS plugins that make your code as small as possible. The most obvious one is whitespace removal, but
cssnanoalso renames custom identifiers (e.g. animation names), merges adjacent rules and more.
These five plugins will give you a head start for developing performant, cross-browser compatible styling. Even with these heavy hitting tasks, compilation times are smaller than what they were using other preprocessors.
:hovermakes your content unaccessible to non-mouse users. See here for more information ↩
Liked this post? Sign up for the weekly newsletter!
Be the first to know when a new article is posted and get an inside scoop on the most interesting news and the freshest links of the week. (I hate spam just as much as you do, so no spam, ever. Promise.)
Tweet this article