I was working with a large css codebase and wanted to see if our rules were becoming more specific as the css source grew, so I built css.benjaminbenben.com to look at how css rules are applied to a page.
This shows how many of the selectors are being used on a page, you can toggle to show only the active ones.
The ‘-‘ link on the bottom right scales the rules so that they fit the height of the window. This is to show the how the impact changes as rules are added to the css.
An example (with notes) of the jsOxford site is below:
The main part of this is a PhantomJS script which 1. loads the page 2. extracts all stylesheet rules 3. finds matching elements for each rule and gets the positions of them 4. takes a screenshot
All this is sent back to the client in a json object (including the image as a data-uri).
The source code is now online at github.com/benfoxall/wtcss