Try Helium. <a href="https://github.com/geuis/helium-css" rel="nofollow">https://github.com/geuis/helium-css</a><p>I wrote and maintain this project for the last 4 years.<p>There are issues with David Walsh's approach that are explained in the Helium README. Automatic stylesheet generation is a terrible idea, for one.
You can also get a list of un-used CSS Rules using Chrome. In the Developer Tools, under Audits, the list will appear under "Web Page Performance."
Most of us are using CSS precompilers (Less, Sass, Stylus) and then stitching tons of files together into a single .css file. I wonder if there is an easy way to produce Sass/Less/Stylus files with the un-used classes removed.
First thought was that this should be a grunt plugin, then I read the comments. Here it is: <a href="https://github.com/addyosmani/grunt-uncss" rel="nofollow">https://github.com/addyosmani/grunt-uncss</a>
This seems to beg for testing integration - run it for every page visited in feature tests, aggregate the results, spit out a "following selectors were defined but not used" report at the end.
This is a great first step. It seems the next step toward usefulness is making it follow some script throughout the site as a build/optimize step to tease out the full set of rule usage (think Selenium on PhantomJS). Automatically finding all rule usage in a data-driven application would be an NP complete problem, but with proper direction from the developers this could be a viable tool. Even more so if it could map back to LESS/SASS rules, which I think would also need some brute forcing or at least hand holding. Nice work!
Neat. There's also a Firebug extension that does this: <a href="https://addons.mozilla.org/en-us/firefox/addon/css-usage/" rel="nofollow">https://addons.mozilla.org/en-us/firefox/addon/css-usage/</a> A little rough around the edges, but it works.<p>The challenge, of course, is that's it's hard to say for sure that something is unused. Maybe it's only called on one page, or only after some interaction with javascript on the page.
As soon as I hit the page I understood what it was and how awesome that was going to be for me. This is genius! I'm sure something like that has been done before but I've never come across it until now.
If you're an ArchLinux AUR user, here's the package: <a href="https://aur.archlinux.org/packages/nodejs-uncss" rel="nofollow">https://aur.archlinux.org/packages/nodejs-uncss</a>
I prefer <a href="https://github.com/peterbe/mincss" rel="nofollow">https://github.com/peterbe/mincss</a>
It's based on python :)
I'm trying this out in AngularJS. So there's an issue with classes locked away inside templates (or building with @ng-class, anyone?), and authentication scenarios.<p>I'm thinking about building URL workflows (stored in arrays) and passing authentication tokens via URL.