PostCSS: What is it and why is it so popular

4 min reading
18 March 2016
PostCSS: What is it and why is it so popular
PostCSS: What is it and why is it so popular

BBVA API Market

It has been said in BBVA API_Market on more than one occasion: 2015 was JavaScript’s year. Not only for the programming language, but also for the platforms or tools that work with this syntax. There is a growing number of JS development frameworks and libraries for just about any project. PostCSS is none of these solutions. It enables CSS code to be transformed into JavaScript using plugins. In 2015 it was one of the surprises in the front-end development market. 
 
The success of a tool among the developer community can be measured in the npm (Node Package Manager) statistical system. npm is the module and dependency manager for Node.js, the star server-side JavaScript interpreter for today’s projects. A simple search for PostCSS shows that 2015 was the big year for this solution with over 9.5 million downloads, and by all indications 2016 will be a record-breaking year: there have been more than 3.8 million so far. 

PostCSS is often compared with style preprocessors like LESS, Sass or Stylus, but this is not the case. PostCSS analyzes the CSS code and turns it into a document that can be edited using plugins in JavaScript. Edit in what sense? This depends on each plugin: from code optimization, color retouching and adding customized selectors and properties, to BEM and SUIT class methodologies, analyses and shortcuts… It is a tool of tools, a process simplifier for JavaScript developers.

Traditional CSS preprocessors have several relevant issues compared to what an alternative like PostCSS can offer. This analysis of the Sitepoint specialized site for developers is really accurate:

●       Traditional preprocessors are not extensible. Each one has a number of features that cannot be modified or expanded. A proprietary extension needs to be created to do so.

●       Each CSS preprocessor has its own standards, in most cases far removed from W3C standards. Bringing a project’s design standards over to W3C creates problems.

●       With PostCSS, developers have plugins that do adapt to W3C design standards. This means that the entire process for developing the project is in line with those standards, without any problems.

●       If those plugins do not offer what is needed, PostCSS offers developers the possibility of designing their own. Moreover, the plugins can be installed separately and the developer can decide the order in which they are run. They can also be configured. 

How to start using PostCSS

PostCSS can be installed in several rather simple ways. One is through an automatic task configurator for JavaScript. These tools are quite common in the case of JS developers. Some of the most interesting ones are Grunt, Gulp or Broccoli. In all cases their is a dependency with respect to Node.js, so the JavaScript interpreter needs to be installed first.

Once we have Node.js on the computer, Gulp should be installed. Installation command:

npm install -g gulp

If the Linux or Mac OS X operating system is being run, the command would be as follows:

sudo npm install -g gulp

When developers have the project fully configured and with Node.js and Gulp running on the computer, all the developer needs to do to install PostCSS is use the following command line: npm install –save-dev gulp-postcss. Does Gulp need to be installed in order to configure PostCSS on the computer? No, it’s one way of installing it if we often use this task manager for projects.

We can also run the following installation command in npm to configure PostCSS without the need for Gulp, Grunt or Broccoli: npm install -g postcss-cli. The best way to make sure that everything is alright and PostCSS is installed, is to run this command: postcss –help. PostCSS has all the configuration documentation in the GitHub respository.

The plugins that matter in PostCSS

 

Each of these plugins performs functions and has very specific features that sets it apart from the rest. This is why on many occasions developers do not use plugins separately and prefer to use plugin bundles that combine functionalities. The best known is probably cssnext. Here is the open repository of this metaplugin in GitHub. Here is the documentation.

cssnext offers all kinds of features. This is the complete list of the most noteworthy ones. Some of them are:

●       Customized color selectors.

●       Adaptable media queries.

●       Customized properties and variables.

●       CSS pseudo-classes.

●       Property filter.

●       Color function.

●       Adding fallbacks in RGBA colors.

●       Ability to add conditionals.

●       Grid system.

●       Optimization tools.

●       Shortcuts.

It is not the only plugin the combines different functionalities. PreCSS, a plugin bundle developed by Jonathan Neal, is also widely used by the developer community. The command for installing PreCSS with npm is as follows: npm install precss –save-dev. This is a fairly comprehensive tutorial on how to install this plugin bundle with or without a task manager such as Gulp or Grunt. All of its specific features are very well summarized.

Developers also have some repositories to run sorted searches for specific plugins for PostCSS. One of the most frequently used is PostCSS.parts. It has a great search engine and in addition the plugins are sorted by category, such as optimization, media queries, color, fonts, images or shortcuts. It’s as easy as going to the category and exploring the options.

Follow us on @BBVAAPIMarket

 

It may interest you