How many times have you worked on a piece of HTML view, wondering “which CSS class do I use here?” Am I supposed to use .user or .person? Does the rule care which element, or only works for div?
To the rescue comes css-annotate. Run it on your CSS and it will show you which selectors to use and where.
I wrote this for my own workflow, so I picked defaults that work best for me. By default it shows all rules, but you can restrict to only commented rules with the –commented option.
You can feed it CSS files, SCSS files and, with the option –syntax sass, also SASS files. It’s cool if your stylesheets use Compass.
The output is HTML, to see the output in your browser you can always pipe to bcat, or run with the --server option and open your browser to http://localhost:8080. After changing the CSS, simply refresh the page.
Shamelessly influenced by the awesome annotated Backbone.js.
Quora