Deconfusing Pre- and Post-processing

Are you still pre-processing or do you already post-process? It’s 2015 after all!

A look back: Pre-processing and post-processing pre-postcss-craze

Figure 1: Pre-processing and post-processing in a toolchain. We transfer a different language than CSS to CSS (pre-processor). From there on, we make changes and adaptations to the result (post-processing)
Figure 2: The concepts applied. Sass gives us Variables, Nesting, Mixins, Imports and Minification out of the box. We use tools like and Autoprefixer to improve our result automaticall

The “new” world with PostCSS

Figure 3: PostCSS gives us much more possibilities. We can use everything we had with Sass (Variables, Nesting and Mixins), some of them even based on W3C standards. Also, we retain the possibility to still use the post-processing tools we did before. But do some of the ideas really fit into the post-processing step?

New terms for the tasks: Authoring and Optimisation

Figure 4: Likewise, we have to ask if (basic) imports and minification are really pre-processing steps

Non Identical Twins

Figure 5: CSS Processors. Including authoring aspects and optimisation features. While PostCSS can cover all optimisation features, you can add one further optimisation step after the original Sass run

CSS Processors

--

--

--

Organising @scriptconf, @plauscherl. Hosting @workingdraft and Scriptcast — A podcast about JavaScript

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Stefan Baumgartner

Stefan Baumgartner

Organising @scriptconf, @plauscherl. Hosting @workingdraft and Scriptcast — A podcast about JavaScript

More from Medium

How to Code Swaying Bamboo with CSS🎋

JavaScript add rows to the table dynamically

HTML

Color Extraction Tools for Front End Web Development

Image Fade Effect Using Pseudo-Elements