Analyzing CSS Rules

Ever wonder just how many unused CSS Rules you have laying around?  You can enumerate your stylesheets and CSS Rules in the browser for stylesheets that originate from the same domain, but that doesn’t help you much if you serve your static CSS files from a CDN.  As it turns out, you can disable the security in PhantomJS using --web-security=false.  You can then enumerate all stylesheets regardless of their domain and test to see how many elements match each selector, if any. I added a quick example to my burgeoning toolkit to create a pie chart showing each stylesheet’s rules as matched (bluish) or unmatched (redish).  The chart below was created using phantomjs --web-security=false cssCheck.js --url=http://fasterness.com.

matched and unmatched CSS selectors by stylesheet

matched and unmatched CSS selectors by stylesheet