CSS pre-processing is a judgment that many web developers have already schooled or review about. We’ve lonesome CSS preprocessing in good detail to assistance developers get adult to speed on this prevalent technology. But what about post-processors?
These comparatively new collection are identical in a clarity that they affect a web growth workflow, however they work on a other side of CSS development (“post” development).
Getting Started with Sass: Installation and a Basics
In this post, we are going to plead a CSS Preprocessor called Sass or Syntactically Awesome Stylesheets. If…Read more
In this post, I’d like to deliver a basics of post-processing, how it works, since you’d use it, and share a few libraries/tools we can use to adult your CSS diversion with post-processing.
Post vs. pre-processing
The pre-processing revolution happened when Sass/LESS strike a scene. These collection concede developers to use variables, loops, functions, and mixins within CSS. This roughly creates simple CSS growth similar to a programming language with extended functionality.
Post-processing happens after we already constructed a plain CSS, and wish to extend it further by automation. This can embody extending category selectors, or auto-appending prefixes for certain CSS properties.
If we wish to know some-more about a disproportion between pre- and post-processing, take a demeanour during this post.
Here’s a quote from a post that is also a source of a picture above. we consider a author Stefan Baumgartner sums a disproportion adult brilliantly.
In a way, both of these seem like automation tools, usually operative in opposite ways. For instance, a common pain solved by post-processing is to auto-append prefixes for newer CSS3 properties.
But this can also be finished in Sass with extensions. So is there unequivocally a difference? Here’s another good quote from a same post:
While this might be loyal in a fanciful sense, a web growth village still creates a order between these tools. For this reason, we would rarely suggest to frontend developers to during slightest review about post-processors, and to know what they can do.
Fit post-processing into your workflow
Almost everybody references PostCSS as a decisive apparatus for post processing. However a PostCSS group has plainly certified on Twitter to changing their title since a wordiness doesn’t utterly make clarity anymore.
PostCSS is no longer usually a pre-CSS or post-CSS tool. It can indeed work in both areas! This serve explains a quote from progressing saying that all CSS collection boil down to one thing — processing.
10 Awesome PostCSS Plugins to Make You a CSS Wizard
PostCSS has newly turn a new cold man in web growth circles, and justly so, as it offers…Read more
To build your possess pre/post CSS estimate workflow, start by making a list of your pain points, such as:
- auto-prefixing CSS gradients
- auto-organization for CSS rules
- appending polyfills for certain properties
- generating picture measure for credentials images
Note that all of these things can be finished in both pre- and post-processing. It’s critical to comprehend is that CSS pre/post estimate is fast merging to turn one in a same thing.
Instead of violation down your goals into opposite stages of processing, it’s softened to list them as objectives, afterwards go on a search for a right tools.
Best post-processing tools
I’ve attempted to equivocate mentioning extensions in this section, as Sass PostCSS have so many things to select from. Honestly we could get by with usually those libraries, though we also wish to offer some alternatives for some-more specific solutions.
If we already work with Node.js, afterwards Pleeease seems like an apparent choice. It has many typical CSS-processing features, such as importing files, variables/functions, auto-minification, and fallback support for newer elements like SVGs.
The website also has an interactive playground for anyone who wants to try a library online though downloading a duplicate locally.
I remember when Internet Explorer 6 was still a nuisance, and it’s good to know IE growth has softened — though not by much. While I’d adore to tell we IE use is fundamentally gone, this usually doesn’t seem to be true.
Thankfully, Bless CSS is a resolution that detects intensity IE-related problems in your CSS, and creates solutions with post-processing. It runs on Node.js, so it fits good into a standard NPM/Gulp workflow.
Here’s a unequivocally cold library that allows we to build CSS with some-more modernized functionality that’s now not supported. The CSSNext library includes support for peculiar CSS4 functions, such as
gray(), that are now usually benefaction in W3C drafts.
I don’t consider each developer will need this library. It’s really specific, and won’t solve day-to-day problems, however it can give we a taste of arriving CSS4 specs while converting a syntax down to complicated CSS3.
If browser support is an emanate for you, afterwards Stylecow is a necessity. This absolute library allows we to rise CSS just for your favorite browser. Then, we can run a authority line apparatus by Node, and your CSS will be updated for all browsers we wish to support.
Lastly we wish to share a
-prefix-free library that’s also a dear apparatus for CSS development, as it allows we to use unprefixed CSS properties. Everyone wants to use complicated CSS properties, such as animations gradients, though nobody wants to copy/paste prolix formula manually.
With this plugin we don’t even have to run your CSS by a postprocessor on your computer. It can also work as a browser embody that runs on a user’s mechanism to automatically refurbish CSS files.
Autoprefixer, that is partial of a PostCSS library, is substantially even a softened choice for local post-processing. That’s since we pronounced before that if we use possibly LESS or Sass along with PostCSS, afterwards you’ll have all we need for an considerable CSS growth workflow.
Post-processing is some-more of a locate word than a genuine technology, nonetheless it does have a place in a CSS workflow, as the whole routine of essay complicated CSS has been dramatically extended by these tools. we can usually suggest that developers puncture deeper to find whatever works best for them.
If you’re looking for even some-more info on post-processing, take a demeanour during these associated articles:
- What Will Save Us from a Dark Side of CSS Pre-Processors?
- A demeanour into essay destiny CSS with PostCSS and cssnext
- CSS Preprocessing (SASS or LESS) vs CSS Postprocessing