PostCSS Article

Introduction

PostCSS is a software development tool which uses Javacript-based plugins to automate routine CSS Operations.

PostCSS was first developed in 2013 by Andrey Sitnik and has been routinely updated ever since.

PostCSS is not very similar to LESS and Sass, but it can be used to develop a template language similar to the technologies / preprocessors.

Features

The PostCSS core structure contains:

CSS Parser that generates an object tree (AST) for a line of CSS-code.
Set of classes that comprises of the tree.
CSS generator that generats a CSS line for the object tree.
Code map generator for the CSS changes made.

Since PostCSS is utilised by JS plugins, its workflow consists of parsers and plugins and then a stringifier, which is then outputs the new css result. These plugins are distributes through an npm.

PostCSS allows changing the parser and generator. In this case, PostCSS could be used to work wit the Less and SCSS sources. However, PostCSS on its own cannot compile Sass or Less to CSS. What it does is change its original files - for instance by sortin the CSS properties or checking the code for mistakes.

Pros/Cons

PostCSS has its pros and cons:

Pros	Cons
Features - Many PostCSS plugins are one of a kind, PostCSS is often used as an addition to Sass and Less.	Configuration - Some developers tend to avoid the burden of choosing plugins and tuning them up to work together. Ready-made plugin sets are only a partial solution to the problem.
Unification - PostCSS plugins cover most CSS building tasks from checking the code for mistakes to minification. As a result, all CSS tools can share the same parser, architecture, and development tools. PostCSS allows for better performance by making all the plugins use the same object tree - in contrast to the common practice of each tool creating one of its own.	Non-standard Syntax - With each project using its own plugin set, a new developer might not understand that the function unknown is related to the unpopular PostCSS plugin. It is recommended to indicate file plugins with postcss-use, but some people find it unnecessary.
Modules - The user is free in their choice of PostCSS plugins and can switch off the unnecessary ones for faster performance. With different plugins solving the same problems, the user can choose whatever best fits their needs. The PostCSS creator believes that the higher number of plugins compete for the user's attention, the better they will eventually become.	Selectors and Values using seperate parsers - PostCSS saves CSS selectors and property values as lines without further parsing them. To parse them, plugins have to use extra parsers. The PostCSS team is going to fix this in future versions.
Speed - PostCSS is equipped with one of the fastest JS-based CSS parsers. It is up to twenty times faster than Ruby Sass and four times faster than Less in doing basic preprocessing. However, real efficiency highly depends on the number of the plugins installed. In fact, the PostCSS creators themselves have confirmed that modern preprocessors work too fast for a speed up to be noticeable.	Sequential Processing - With the object tree being able to respond to only one plugin at a time, having a number of plugins might result in lower performance. Besides, there are functions no plugin can process. The PostCSS team is going to fix this in future versons.

Extra Programs

PreProcessors such as Less, Sass
Front End Web Technologies such as CSS, HTML, JS
Front End Web Frameworks such as ReactJS, Vuejs, AngularJS
Front End Styling Frameworks such as Bootstrap and Foundation

Sources

Summary

In conclusion:

PostCSS is very useful for developing and styling front end web pages, especially with CSS. It can be used in conjunction with Less and Sass is heavily plugin dependant. It is being increasingly used in the development of web applications and is needed for front end web developer roles (most notably in styling webpages).