One of the first things I noticed when I started working at Kickstarter was how the other designers were struggling with and spending a lot of time on front-end development. These were smart, talented people, and writing HTML and CSS shouldn’t be that hard or take that long. I had to dig a little further to figure out what was going on.

I also noticed that the page took about 5 seconds to load and the minified CSS file was 1.1MB. One thing I’ve learned over the years is that performance matters a lot – for both business goals and user experience – and even with caching, CSS of that size will certainly cause page rendering problems. For some reason, no one seemed to be paying attention to front-end rendering performance. Who knows how much money creators are missing out on or how many cool projects go unnoticed.

Refactoring Workflows and 1.1MB of CSS

I went about tackling some of the front-end architecture and workflow problems, while aiming to better document our style guide and pattern library. This also meant cleaning up and consolidating all the inconsistent styles across the nearly five-year-old app.

=block
  display: block

Mixins like this one don’t help anyone.

The legacy CSS architecture used a plethora of Sass mixins and was organized by Rails views. The old architecture “scoped” each view by using the body’s id at the beginning of the cascade. CSS cannot be scoped – it’s global by nature - and I knew the architecture they were using was generally considered bad practice. The outcome of this approach was that virtually no styles were reusable, and the designers were spending a lot of time writing CSS. Even the typographic scale and grid system used mixins that created a lot of duplicative code.

We've been trying OOCSS at @kickstarter (thx to @jxnblk) and it now means I can prototype new pages without writing a single line of CSS.

— Jessica Harllee (@harllee) November 20, 2013

Getting Everyone On Board

After discussing with the other designers and developers, we decided to begin architecting an OOCSS-based library to slowly ween us off the old system. The other front-end designers were very enthusiastic, quickly picked up the new CSS approach, and immediately began contributing. Each new feature rolled out since then has relied heavily on the new library styles and, although there hasn’t been a dedicated effort to refactor, we’ve managed to reduce the overall size of our CSS by about 30% – from about 1.1MB to 777KB.

As a proof of concept, this event page was built using the new library and no new CSS styles were added.

I developed both the 2013 Year in Review site and the Sundance 2014 microsite using the new library styles as a base.

Open Sourcing It

In attempt to share some of my learnings – and since the Kickstarter style guide is not public, I distilled some of the basics of our library styles and documentation into an open source side project: Basscss

Singles Club , which I helped my friend and coworker Chris Muccioli with, is built using Basscss.