{"id":28352,"date":"2016-11-01T23:01:33","date_gmt":"2016-11-01T15:01:33","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=28352"},"modified":"2022-09-21T17:31:36","modified_gmt":"2022-09-21T09:31:36","slug":"css-post-processors-tips-resources","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-post-processors-tips-resources\/","title":{"rendered":"CSS Post-Processors For Beginners: Tips and Resources"},"content":{"rendered":"

CSS pre-processing<\/strong> is a concept that most web developers have already learned or read about. We\u2019ve covered CSS preprocessing in great detail<\/a> to help developers get up to speed on this prevalent technology. But what about post-processors<\/strong>?<\/p>\n

These relatively new tools are similar in the sense that they affect the web development workflow<\/strong>, however they operate on the other side of CSS development<\/strong> (\u201cpost\u201d development).<\/p>\n

In this post, I\u2019d like to introduce the basics of post-processing<\/strong>, how it works, why you\u2019d use it, and share a few libraries\/tools you can use to up your CSS game with post-processing.<\/p>\n

Read Also:<\/strong> Getting Started with Sass<\/a><\/p>\n

Post vs. pre-processing<\/h2>\n

The pre-processing revolution<\/strong> happened when Sass\/LESS hit the scene<\/strong>. These tools allow developers to use variables, loops, functions, and mixins within CSS. This almost makes basic CSS development similar to a programming language<\/strong> with extended functionality.<\/p>\n

Post-processing<\/strong> happens after you already produced the plain CSS, and want to extend it further<\/strong> through automation. This can include extending class selectors<\/strong>, or auto-appending prefixes<\/strong> for certain CSS properties.<\/p>\n

Generally speaking, pre-processing has its own stylesheet languages<\/strong>, such as Sass<\/a> and LESS<\/a>, that convert into pure CSS<\/strong>. Post-processing takes that basic CSS, and applies automation\/repetition<\/strong>.<\/p>\n

\"CSS
IMAGE: Medium.com<\/a><\/figcaption><\/figure>\n

Here\u2019s a quote from a post<\/a> which is also the source of the image above. I think the author Stefan Baumgartner<\/strong> sums the difference up brilliantly.<\/p>\n

\u201c[Preprocessors] take a language that compiles to CSS. And [Postprocessors] align and refurbish CSS to have the best possible outcome for today\u2019s browsers.\u201d<\/p>\n

In a way, both of these seem like automation tools, just working in different ways. For instance, a common pain solved by post-processing is to auto-append prefixes for newer CSS3 properties<\/strong>.<\/p>\n

But this can also be done in Sass with extensions. So is there really a difference?<\/strong> Here\u2019s another great quote from the same post:<\/p>\n

\u201cPre-processors\u201d and \u201cpost-processors\u201d don\u2019t exist. They are CSS processors taking care of both authoring and optimization features.<\/p>\n

While this may be true in a theoretical sense, the web development community still creates a divide between these tools. For this reason, I would highly recommend to frontend developers to at least read about post-processors and to know what they can do.<\/p>\n

Fit post-processing into your workflow<\/h2>\n

Almost everyone references PostCSS<\/a><\/strong> as the definitive resource for post-processing. However the PostCSS team has openly admitted on Twitter<\/a> to changing their title<\/strong> because the verbiage doesn\u2019t quite make sense anymore.<\/p>\n

PostCSS is no longer just a pre-CSS or post-CSS tool. It can actually work in both areas<\/strong>! This further explains the quote from earlier stating that all CSS tools boil down to one thing \u2014 processing<\/strong>.<\/p>\n

\"PostCSS<\/a><\/figure>\n

PostCSS uses JavaScript plugins to automate your CSS workflow<\/strong>, and you can even write your own JS plugin to extend the PostCSS library. If you want to get started with PostCSS check out this intro tutorial<\/a> on Smashing Magazine. If you already use and understand Sass, then you\u2019ll pick up Post CSS quickly.<\/p>\n

Read Also:<\/strong> 10 Awesome PostCSS Plugins to Make You a CSS Wizard<\/a><\/p>\n

To build your own pre\/post CSS processing workflow, start by making a list of your pain points<\/strong>, such as:<\/p>\n