CSS Dig: It’s Time to Refactor

On many sites CSS is like a neglected garage: you toss stuff in it for years always planning to get organized. Who knows what lurks in those files? You might even be afraid to look. Multiple developers working with different designers, combined with a lack of standards, invariably lead to inconsistent and difficult to maintain code. Refactoring is your only hope.

But how do you start to identify the problem areas? Inspired by Nicolle Sullivan’s advice to “grep your styles”, CSS Dig is a Chrome Extention that unearths properties and values from almost any website—from both linked CSS files as well as any code found in style blocks—to help you analyze, refactor, standardize and maintain your CSS.

CSS Dig for Chrome running against apple.com.

Figure 1 shows the three states of the CSS Dig Chrome Extension. The first image is the summary screen, showing the CSS files to be included and excluded. The second shows properties and counts along with the concatenated CSS. The third shows selector length and specificity, highlighting its location in the CSS.

Colors, Colors and More Colors

A good place to start your analysis is to identify the colors declared on your site. Having too many is often the “canary in the coalmine” that the rest of your code could use refactoring. Do you really need 13 similar shades of blue or is this the result of developers and designers grabbing the wrong color? Check out the colors reported by CSS Dig on huffingtonpost.com in Figure 2 below.

Huffington Post’s many colors.

Results like these usually indicate there’s a broader problem. Consolidate your blues and grays and reds into a simplified palette and make it easy for developers to pick the right one. If you’re using a CSS pre-processor (you are, right?) create variables and stick to them. After the refactor run the report again to see if anyone has strayed from the One True Path.

Apply this same process to consolidating font sizes, margins and paddings, and any other red flags that might be causing maintenance issues and ballooning CSS files. For example, note a few of the 22 unique z-index values found on msn.com.

...
z-index: 10;
z-index: 100;
z-index: 100000;
z-index: 100000000;
...

100 million! Can’t go any higher than that, right?

Coding Style & Standardization

Another area to look at is the consistency of your code. On many sites you’ll find color declarations like this:

color: #ccc;
color: #cccccc;
color: #CCC;
color: #CCCCCC;

All four are equivalent and will render the same but why not be consistent? Make a decision as a team what style you want to use and stick to it. The same kind of standardization should be applied to many different properties.

Rules like these can seem like nit-picking — and they are — but if you’re working on a large code base they all serve a larger purpose: If your code looks as though one developer produced it you’ll simplify maintenance and help new contributors get up to speed. I recommend using an SCSS linter so issues like these are caught early.

Don’t Stop Now

After a close examination of your CSS you’ll likely realize that that fixing a few color variables and font sizes only scratches the surface. What you really need to do is refactor your HTML along with your CSS.

This is a harder problem, beyond the scope of this post and the CSS Dig tool, but to help get started take a look at the slides of Nicolle Sullivan’s presentation on refactoring Trulia. Here are a some of her suggestions along with a few of my own.

A few other resources:

Contribute

The CSS Dig repository contains the the source code for the extension. If you have suggestions or find bugs let me know.