CSS Specificity Graph
The objective of this project is to take provided CSS, analyze the selectors, and generate a specificity graph (based on this post).
Just so we're all on the same page, I will misspell "specificity" often and, just as often, not correct it.
Want a demo? Here you go.
- Some CSS that you want to analyze (minified or not)
- Download and unzip this repo
- Plug your CSS into styles.min.css
index.phpin a browser
- Reading CSS from http://www.bewebmaster.com/228.php
- Media Query block parsing from http://stackoverflow.com/questions/14145620/regular-expression-for-media-queries-in-css
- CSS Specificity score calculation modeled on https://github.com/keeganstreet/specificity
- D3.js is rad.