CSS Management

On any large web application, CSS can quickly become unmanageable. The main issues we’ve faced are load time, overwhelming scope, and cruft (the old stuff we don’t use). Here at Zoosk, we are managing CSS in several different ways, lest it manage us.

CSS Packages

We use a packaging system so that each page only grabs the CSS that it needs. We map anywhere from 1 to 35 stylesheets to a CSS package that’s then processed into a single stylesheet, so our final pages only have a few stylesheets rather than dozens. This makes for a faster user experience, while allowing us to have many stylesheets, each typically just a few hundred lines long. The small but numerous approach helps manage the large scale of our CSS efforts.

Cleaner CSS

Our code base had a lot of unneeded selectors that we’ve weeded out — we shouldn’t ever need more than 3 selectors for anything. Additionally, IDs should be avoided in a stylesheet, and so should elements (unless you’re actually targeting all h1 tags, etc). An ID overpowers too easily, and an element combined with anything is costly to the user in terms of load time, as the browser has to traverse the DOM looking for every single element of that type and check on its ancestors.

Check out CSSLint for automated recommendations to clean up your CSS. I won’t swear that every Zoosk stylesheet makes the grade, but we’re well on our way.

“Object Oriented” CSS

This is a new approach for us here at Zoosk, but it has already reduced our CSS by 28%. Historically, our CSS has mimicked our PHP, meaning that any number of new features required about an equal amount of new CSS. Now, we’ve gone non-linear in a good way by pulling out design patterns common across the site and giving them their own selectors. When thinking in terms of small design modules, or “objects”, CSS for a new feature can be pretty minimal. For great videos and writing on OOCSS, go check out Stubbornella.

The Benefits

Here at Zoosk, CSS development is now faster than in the past, and page loads are smaller. It’s payed off to tackle our CSS!

-Beth Budwig, UI Developer