Front-end developers have already been acquainted with SASS and LESS. Many of them have also heard about PostCSS, but not everyone had a chance to try it out in work. Nevertheless, this tool becomes more and more popular every day due to a growing list of benefits over other systems. A similar situation took place with other preprocessors several years ago by ruby developer at Railsware.com.
The question is – why would you need to use another sort of CSS system when you have already got used to CSS preprocessors with great performance (for example, Stylus and SASS)? Frankly speaking, you do not actually need it for your work. However, it can make development a lot easier and expeditious, so why won’t you try?
First, we should make sure that you are aware of the difference between PostCSS and other systems. Does it force you to replace your old tools with new postprocessors? This question is about to be answered.
How to Treat PostCSS
For the beginning, you need to understand that PostCSS is created not solely for preprocessing (even though numerous developers use it instead of LESS, Stylus, and SASS. The point is – you can use it either as a preprocessor or in combination with your favorite preprocessor! Isn’t it perfect?
As well, it is not only a postprocessor. The thing that often confuses developers is a “post” prefix in a tool’s name. They somehow decide that it is a postprocessor without trying it out beforehand. A “post” part determines the meaning of “next generation CSS” or “beyond CSS” but has nothing to do with a particular stage of development.
The Real Purpose of PostCSS
Created be Andriy Sitnik of Evil Martians, this tool gives an opportunity to adjust your CSS in a chosen way, using chainable plugins (each of plugins is connected to a particular modification). These functions are somehow similar to autoprefixer that adds vendor prefixes to your CSS if needed. The usage is quite simple and transparent. It begins with running your valid CSS code through a CSS parser, which parses it into a CSS node tree. After that, it applies a chain of plugins, which you choose, and, as a result, it stringifies modified CSS node tree back into a CSS code. It might seem that PostCSS is a good substitution for a preprocessor, but this opinion is not right. You may use it in combination with plugins to translate SCSS and SASS syntax into CSS. In the end, using PostCSS with a preferred preprocessor (or instead of it) is a rather effective choice.
You might have already understood that PostCSS is a quite helpless tool without an outer support. Nevertheless, it allows your work with CSS to be more effective than with any of popular preprocessors (with entire plugins ecosystem, for sure).
The Potential of Plugins
Do you remember how excited you were when SASS was released? You were able to use various tools like Compass for every CSS3 property that existed to make sure that all of the vendor prefixes are processed properly. PostCSS gives you a chance to get rid of the prefix trouble, alongside with many other headaches. Autoprefixer package for PostCSS will take care of the prefixes while you can write CSS or SCSS as if browsers support all CSS properties. And guess what – autoprefixer is included in the endless list of PostCSS plugins. Just imagine how many irritating problems can be omitted by chaining different plugins within PostCSS.
PostCSS gives you a chance to use next iterations of CSS, the syntax, and features that you cannot use properly yet, but they are in development and already available. After running through PostCSS, your code includes everything you need for work, no matter if it is currently compatible or will only be compatible in future.
PostCSS has more to give – plugins can efficiently be used in development process. Each plugin is a plain JavaScript function, which receives a CSS node tree as an argument, transforms it and then returns the modified tree. Therefore, you can write your own plugins if you are familiar with JavaScript.
Basic Sets
Browse postcss.parts resource for various PostCSS packages. As well, you can find some extras that can be included in your CSS and improve your system’s performance. Our team has its own choices for the most efficient work:
- level4 – allows you to use W3C CSS Level 4 Modules Today with PostCSS. Take advantage of future techniques like variables, custom selectors, color functions, and new pseudo selectors.
- cssnext – a CSS transpiler that allows you to use the latest CSS syntax today. It transforms CSS specs into more compatible CSS so you do not need to wait for browser support.
- rucksack – contains plugins to speed up CSS development with new features and shortcuts.
To sum up, we would like to mention that PostCSS could be used alongside with your favorite CSS system, or instead of a preprocessor itself. Its main purpose support the “write less, do more” thesis. It can be customized; any possible plugins can be added or deleted.