I used to believe hand-crafting every line of code was a necessity. I u-turned on that opinion and adopted CSS preprocessors with much gusto last year.

It wasn’t so much the syntactical learning curve that initially put me off — they’re familiar if you’ve done any kind of programming — it was the perceived “added complexity” they would bring. For what, one more barrier to entry? The value I’ve since found:

  • Code maintainability with includes.
  • Understandable media query breakpoints across modular patterns.
  • Relief from the repetition of vendor prefixes and fallbacks.

CSS preprocessors have become integral to my workflow. I don’t go overboard. It’s very important to refrain from doing things differently for the sake of it. Yet I now find it painful to work without them.

A new process

I cringe when I think of the amount of PSDs I used to produce. When I first started working agency-side it was expected that the client would see a minimum of three design mock-ups to choose from. I did well whittling that process down to a single, evolving design.

These days there are no final design mock-ups. No sign-off stage. Design and build happens at the same time. I do very little “designing in the browser” — writing code doesn’t exactly allow creativity to flow in that sense — but I get there fast.

This change in methodology has highlighted many more bottlenecks in my design and front-end development. CSS preprocessors were just the tipping point. Today I’m using Grunt which performs the following tasks for me:

  • CSS preprocessing with Sass (via Compass)
  • JavaScript linting and minifying with UglifyJS
  • SVG optimisation/minifying with SVGO
  • SVG rasterisation *

* to create PNGs from SVGs I use a PhantomJS script (heavily based on Grunticon)

I’m even working on my own Node.js tasks to build HTML includes for faster prototyping. I really like Hammer for Mac but its all-or-nothing simplicity sits awkwardly with my additional requirements. Mixture is another tool I look forward to testing.


For projects I’m working on alone these tools have sped up my workflow massively but I worry I’m becoming too dependant.

Scott Kellum has an internal conflict I know all too well:

I’m not saying these tools aren’t valuable because they absolutely are. They are just introducing fragmentation into our community and I am noticing how much of a part of it I have become. I want to share my code with everyone who writes CSS, not a subset of that group.

Sharing and working with others; occasions where I’ll have to down tools and do things the old fashioned way? That may be painful, but when I look at how complex browsers are becoming the price of automation is one I’m happy to pay.

And what of fragmentation? That is inevitable in my opinion. When I wrote and spoke about responsive navigation recently I shared a lot of practical techniques and concepts. The final code; that was less important. Implementation is becoming too nuanced for copy & paste examples. When it comes to sharing I’m starting to find more value in the automated process rather than the final output.

Automation, for me, is here to stay.

Buy me a coffee! Support me on Ko-fi