CSS Post-Processors For Beginners: Tips and Resources

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

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.

Generally speaking, pre-processing has a own stylesheet languages, such as Sass and LESS, that convert into pristine CSS. Post-processing takes that simple CSS, and applies automation/repetition.

If we wish to know some-more about a disproportion between pre- and post-processing, take a demeanour during this post.

CSS Processing DiagramCSS Processing Diagram

IMAGE: Medium.com

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.

PostCSS Home PagePostCSS Home Page

PostCSS uses JavaScript plugins to automate your CSS workflow, and we can even write your possess JS plugin to extend a PostCSS library. If we wish to get started with PostCSS check out this intro tutorial on Smashing Magazine. If we already use and know Sass afterwards you’ll collect adult Post CSS quickly.

10 Awesome PostCSS Plugins to Make You a CSS Wizard

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.

Pleeease

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.

Pleeease CSS Home PagePleeease CSS Home Page

The website also has an interactive playground for anyone who wants to try a library online though downloading a duplicate locally.

Bless

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.

Bless CSS Home PageBless CSS Home Page

CSSNext

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.

CSSNext Home PageCSSNext Home Page

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.

Stylecow

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.

You can download Stylecow from GitHub, and it comes with some impossibly minute documentation.

Stylecow Home PageStylecow Home Page

-prefix-free

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.

-prefix-free Home Page-prefix-free Home Page

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.

Wrapping Up

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:

Add Comment