Implementing the CSS Specificity Graph

I've been working on an implementation of Harry Roberts' CSS Specificity Graph using PHP and D3.js.

I’m gearing up for an audit of our corporate site’s CSS next month, and so it follows that I want to have pre- and post-audit statistics to illustrate the improvements we will have made.

While working up a list of objectives, I came across this post in which Harry Roberts details what he calls the CSS Specificity Graph:</p>

The Specificity Graph is ... a very simple model for diagrammatically assessing the overall health of your codebase in terms of specificity—a way of looking at an entire project’s CSS and highlighting any potentially troublesome areas of higher-than-ideal specificity. We can then use this snapshot to refactor and rearchitect old projects into a better shape, or to ensure we’re writing new projects in a sustainable manner.

After pondering it for a few days, I set about writing an implementation of this graph using PHP for the parsing and D3.js for the visualization.

A couple days and a handful of D3 tutorials later, I have a fairly rough draft version of the implementation on GitHub, as well as a live demo.</p>