Uncss – Find unused CSS

Try Helium. <a href="https://github.com/geuis/helium-css" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;geuis&#x2F;helium-css</a><p>I wrote and maintain this project for the last 4 years.<p>There are issues with David Walsh&#x27;s approach that are explained in the Helium README. Automatic stylesheet generation is a terrible idea, for one.

If this worked across a whole site rather than a single page, that would be great.

You can also get a list of un-used CSS Rules using Chrome. In the Developer Tools, under Audits, the list will appear under &quot;Web Page Performance.&quot;

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&#x2F;Less&#x2F;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:&#x2F;&#x2F;github.com&#x2F;addyosmani&#x2F;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 &quot;following selectors were defined but not used&quot; 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&#x2F;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&#x2F;SASS rules, which I think would also need some brute forcing or at least hand holding. Nice work!

Neat. There&#x27;s also a Firebug extension that does this: <a href="https://addons.mozilla.org/en-us/firefox/addon/css-usage/" rel="nofollow">https:&#x2F;&#x2F;addons.mozilla.org&#x2F;en-us&#x2F;firefox&#x2F;addon&#x2F;css-usage&#x2F;</a> A little rough around the edges, but it works.<p>The challenge, of course, is that&#x27;s it&#x27;s hard to say for sure that something is unused. Maybe it&#x27;s only called on one page, or only after some interaction with javascript on the page.

Maybe I missed the info, but does it work for a whole website or only 1 subsite?

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&#x27;m sure something like that has been done before but I&#x27;ve never come across it until now.

If you&#x27;re an ArchLinux AUR user, here&#x27;s the package: <a href="https://aur.archlinux.org/packages/nodejs-uncss" rel="nofollow">https:&#x2F;&#x2F;aur.archlinux.org&#x2F;packages&#x2F;nodejs-uncss</a>

I prefer <a href="https://github.com/peterbe/mincss" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;peterbe&#x2F;mincss</a> It&#x27;s based on python :)

I don&#x27;t see how this could work on a single page application where only a small fraction of the content is loaded on page-load.

I&#x27;m using css less and less these days, and letting the browser decide how to render html5 on its own...

I&#x27;m trying this out in AngularJS. So there&#x27;s an issue with classes locked away inside templates (or building with @ng-class, anyone?), and authentication scenarios.<p>I&#x27;m thinking about building URL workflows (stored in arrays) and passing authentication tokens via URL.