For years, the front-end community debated over whether CSS preprocessing was necessary. The language is a simple one; why are we complicating it? Thankfully, over time, and as the web stack matured, the majority of front-end developers came to terms with the fact that, until the language itself matures a bit more, preprocessing is a necessity for all but the most trivial of websites. Don’t worry: many of these preprocessor conveniences are slowly but surely working their way into the language. These things simply take time.
As its website so boldly declares, Sass makes CSS fun again. Variables, nesting, mixins… Sass has it all. More importantly, if your goal is to learn the most popular preprocessor available, as well as various frameworks built on top of it, such as Compass, Sass should be your choice.
Sass can even mould itself to fit your needs. If the indent-specific style of the original .sass syntax feels foreign to you, then simply switch to the alternate .scss format, and continue writing your stylesheets in the same fashion that you’ve done for years.
Chances are, if you join a development team in the near future, Sass will be their preprocessor of choice, and the one that you will be asked to learn.
A relative newcomer to the scene, Stylus perhaps offers the most flexibility of all three preprocessors in this list. Prefer semicolons? Keep them. Hate using colons to separate properties and values? Remove them! The key is in the fact that Stylus provides you with the ability to customise your stylesheets how you see fit. Configurability at its best!
The only downside (and a significant one, at that) is that, due to its age, it’s more than likely that members on your development team – or community contributors if you happen to be developing an open source application – will likely not yet be familiar with Stylus.
Thanks to increased adoption and improvements to source maps, many of the downsides to using such a preprocessor are rapidly becoming non-issues. If you question the need for yet another preprocessor, never fear; like Sass, many of CoffeeScript’s innovations will be implemented into future versions of ECMAScript.
CodeKit, created by the always funny Bryan Jones, exploded onto the front-end world in 2012 and is now used by such sites as BarackObama.com and Engadget. Like steroids for web developers, it merges various compilers, minifiers and optimisations into one beautiful Mac application. If the Terminal feels like a black box to you, limiting your ability to embrace and harness the previously mentioned preprocessors, then CodeKit is your solution.
LiveReload is quite similar to CodeKit. In fact, disregarding some UI differences, and a few of CodeKit’s unique features, both apps will equally allow you to get from point A to Z, so to speak.
Like CodeKit, LiveReload allows you to monitor a file system for changes, and perform the necessary preprocessing and compiling in response. It will also auto-update the browser upon saving each file.
Unlike CodeKit, however, LiveReload is available for both Mac and Windows. In translation, if you’re a Windows user, LiveReload is, by default, your only choice. Don’t worry; it’s a good one!
If you happen to be using Backbone, then you’re likely already familiar with Underscore, as it’s a hard dependency of the framework.
TOOLS AND UTILITIES
Once you optimise your coding workflow, it quickly becomes apparent that additional tooling and functionality might be necessary. Such tools include everything from module loaders to test runners.
One significant barrier to testing is the simple fact that it can sometimes take a considerable amount of setup to get up and running. The longer it takes, the more likely it is that the developer simply won’t bother. That’s why Testem is so fantastic: it makes testing as effortless as possible – and, more importantly, fun!
We’ve all experienced it; your website displays beautifully in Chrome and Firefox, but then you view it in Internet Explorer and come to terms with the fact that you’ll be dedicating the next several hours to cross-browser support. Normalize makes all browsers render elements in as consistent a fashion as possible. Have you ever experienced the annoyance of debugging a three-pixel input height inconsistency, from browser to browser? With Normalize, you’ll never deal with that again!