Writing CSS by hand for a web site or app of any appreciable dimension appears quaint lately, in the way in which that shaping a chunk of wooden with an adze appears quaint. Admirable, maybe, however even when it provides you a tangible connection to the precise final result, the vestigial quirks, limitations, and tedium of that workflow make it really feel archaic.
Article Continues Under
Till a number of years in the past, this direct methodology was our solely actual choice. We managed CSS by hand, and it received sophisticated and crazypants. So when pre-processors began exhibiting up—Sass, LESS, Stylus—we clutched at them, giddy and grateful like sleep-deprived dad and mom.
Pre-processors to the rescue!#section2
Their followers know that pre-processors do a number of stuff. Variables, features, nesting and calculations are a part of the pre-processor assortment, however there’s usually additionally assist for concatenation, minification, supply maps, output formatting. Sass looks like an authoring software, framework, configuration supervisor, remodel and construct software in a single. They’ve develop into very fashionable—particularly Sass, the juggernaut. Huzzah! Such energy!
Pre-processors… to the rescue?#section3
But as with different highly effective issues, Sass has a darkish aspect. Its potential malevolence tends to manifest when it’s wielded with out consideration or deep understanding. Within the latest article A Imaginative and prescient for our Sass, Felicity Evans factors out among the methods unmindful use of Sass can lead to regrettable CSS.
Pre-processors have a manner of holding us at arm’s size from from the CSS we’re constructing. They placed on us a cognitive burden to maintain up on what’s evolving in CSS itself together with the methods we will pull off particular to our pre-processor. Positive, if we’re intrepid, we will carry on high of what comes out the opposite finish. However not everybody does this, and it reveals.
Overzealous use of the @prolong characteristic in Sass can create bloated stylesheet recordsdata bobbing in a swamp of repeated guidelines. Excessive nesting can result in abstruse, overlong, and unintentionally overspecific selectors. And simply because you need to use a Sass framework like Compass to simply whip up one thing clever and glossy, it doesn’t assure that you’ve any kind of grip on how your generated CSS truly works.
Pre-processors… FTL?#section4
Diabolical output is one danger, and but there are extra methods pre-processors can journey us up.
Working with a pre-processor means writing supply in its Area-Particular Language (DSL). (You may additionally pen your supply utilizing completely vanilla CSS, however that will be fairly pointless, as the facility of pre-processing comes from operations on variables, mixins, and different options written of their explicit syntax.) You feed this supply to the pre-processor and out comes CSS prepared for browsers. You couldn’t take your supply and use it in a browser. It’s not prepared but.
That implies that the supply just isn’t completely transportable. So selecting a specific pre-processor could also be a long-term dedication—Sass and different pre-processors can create a certain quantity of lock-in.
On a conceptual degree, the breadth of pre-processors’ scope is important sufficient that it may possibly insinuate itself into the way in which we expect and design. In that sense, it’s not a software however a system. And this may get beneath the pores and skin of individuals—particularly devs—who thrive on separation of issues.
That is starting to sound like an argument to ditch Sass and its brethren and return to the homespun world of handcrafted CSS. And but that could be a false dichotomy: pre-processors or nothing. There are different instruments for managing your CSS, and I’m particularly looking forward to a brand new (ish) class of instruments referred to as post-processors.
Submit-processors to the rescue!#section5
In distinction to pre-processors’ distinct syntaxes, post-processors sometimes feed on precise CSS. They will act like polyfills, letting you write to-spec CSS that can work sometime and reworking it into one thing that can work in browsers right this moment. Splendid CSS in, real-life CSS out.
It’s possible you’ll already be utilizing a post-processor alongside your pre-processor with out being conscious of it. The favored autoprefixer software is in reality a post-processor, taking CSS and including acceptable vendor prefixes to make it work in as many browsers as potential.
Many post-processors—particularly these written with a plugin strategy—do just one particular factor. One would possibly polyfill for rem items. One other would possibly autogenerate inline picture knowledge. You may choose and select the modular plugins you might want to remodel your CSS.
Submit-processors sometimes edge out their pre- brethren in build-time speediness.
And since they can be utilized as modular chunks, they will serve a balm for the aforementioned separation of issues violations.
With this type of authoring, we now have a built-in necessity to remain present on the way in which new specs specific themselves in precise CSS syntax, and which means post-processors’ transformations aren’t as inscrutable. Plugin authoring, too, is pegged to the identical specs. Everyone seems to be marching to the identical, standards-driven beat.
That is beginning to really feel like outright post-processor boosterism, isn’t it?
Besides.
Submit-processors… to the rescue?#section6
The case for post-processors isn’t completely coherent. There isn’t even any consensus concerning the definition. The best way I’m explaining post-processors is my very own interpretation. Don’t take it as gospel.
Actual-world implementations don’t assist to clear the image, both. A number of modules written utilizing postcss, a JavaScript framework for post-processors, contain customized syntax that doesn’t align with the definition I’m outlining right here (legitimate CSS in, legitimate CSS out). By my definition, delusion.io can be a post-processor, however is described by its maintainers as a pre-processor. Possibly post-processors aren’t even a factor, or solely exist in my fevered, idealistic creativeness.
Submit-processors might maintain extra attraction to sure members of the web-building viewers. The attraction of shaving some milliseconds off construct has extra clout with some than others. Modularity is one factor, however pre-processors can do so many issues. It’s arduous to wean from one thing that serves us so nicely.
Taking a path paved with lean, modular post-processing plugins includes sacrifices. No extra nesting. As an alternative of an infinite horizon of mixin prospects, it’s possible you’ll be sure to CSS spec realities, like calc or CSS variables. One promising framework for rolling out post-processing plugins is postcss, however it’s younger but and its documentation is in a correspondingly awkward adolescent part.
Understanding your craft to the rescue!#section7
Keep in mind that factor I mentioned earlier about false dichotomies? Gotta keep in mind that, as a result of pre- and post-processors aren’t mutually unique.
We fortunately use each in my workplace. A few of our extra dev-y designers have taken a shine to the post-processing philosophy, whereas different designers stay happy with the all-in-one, intuitive oomph Sass provides them. Each are proper.
Although every camp may need a unique strategy to instruments, the essential commonality they share is a deep understanding of the CSS that comes out the opposite aspect. Neither set of instruments is a crutch for ignorance. Know your craft.
Though there are other ways to get there, a considerate understanding of CSS is a prerequisite for continued success in constructing nice issues for the online. Whether or not you’re one to meditatively chip with an adze alongside a uncooked CSS stylesheet otherwise you favor to run it via a high-tech sawmill, you’re all the time higher off understanding the place you’re ranging from and the place you’re attempting to go.
