Introduction
PostCSS is an engine/tool for processing/transforming CSS with JavaScript. It help’s us writing CSS faster and more efficiently. There are different plugins that we can use with PostCSS. Some of them include cssnano which helps in compressing the CSS files, Autoprefixer which programmatically adds prefixes to the CSS files, making things like Flexbox easier to code for modern browsers, adding future CSS syntax/features that can work with older browsers using cssnext & finally PreCSS pack, which lets us use a Sass-like syntax for working with our projects.
What is PostCSS?
- PostCSS at its core is an engine for transforming CSS with JavaScript.
- Uses NodeJS and installs through NPM which allows it to take care of different transformations.
- It can also work with different build tools like GulpJS, GruntJS, Broccoli, and others to handle the transformation process.
- It is 3 – 30 times faster than other tools since it uses NodeJS and has a modular architecture which makes it a lot more efficient. Sass in contrast, needs Ruby installed and when you add some extensions they get added as gems which makes the applications run a little bit slower.
- The first difference that you will notice between PostCSS and Sass or LESS is the super small size of the core engine which makes it more efficient.
- Another big difference between PostCSS and other tools is that its not just limited to pre-processing. PostCSS can also work as post-processor which means it can convert future CSS syntax to CSS, but also do tasks like adding prefixes to a finished stylesheet.
- Although PostCSS is new it has a large plugin base.
- Can handle an amazing number of tasks including support for future CSS features in older browsers like variables or mixins. It can work like Sass providing features like nesting and variables.
- Because of PostCSS’s modular architecture we can use it with our exisiting tools.
- Because PostCSS is modular, fast and flexible it’s quickly becoming a serious contender to take care of common tasks.
What you need to work with PostCSS?
- NodeJS
- In order for PostCSS to work, it needs to be integrated into your workflow through a build tool. We can use many different tools, including Gulp, Grunt, Webpack or Node.js itself.