
Uncss – Find unused CSS - josephcs
http://davidwalsh.name/uncss
======
geuis
Try Helium. [https://github.com/geuis/helium-
css](https://github.com/geuis/helium-css)

I wrote and maintain this project for the last 4 years.

There are issues with David Walsh's approach that are explained in the Helium
README. Automatic stylesheet generation is a terrible idea, for one.

~~~
highace
Cool, and this runs in the browser without needing nodejs too.

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

~~~
deanclatworthy
Exactly. Sitepoint made a browser extension to do this years ago but it's not
really actively maintained anymore:
[http://www.brothercake.com/dustmeselectors/](http://www.brothercake.com/dustmeselectors/)

~~~
fat0wl
There is an add-on for Firebug too ([https://addons.mozilla.org/en-
us/firefox/addon/css-usage/](https://addons.mozilla.org/en-
us/firefox/addon/css-usage/)) -- I use it a big corp. Basically if there is
some wild huge monolithic css file I'll cut a new one for a site & use this to
pick a decent-looking base subset from the existing dung heap. Then I'll use
it again later to analyze widgets etc. if someone complains "how come ______
doesn't look like it does on the old site?".

I'd love for this all to be automated but it seems there are some fundamental
flaws in that. Sometimes unused css still fits into a logical unit and
_should_ be included. Sometimes in-use css is just a piece of garbage
innocuously clinging to some jagged edge of the DOM.

I try to comment blocks of CSS with both starting and ending comments, "______
START" to "_______ END" to avoid this. That way I can extract those pieces
later without really worrying that I'm mangling a code module, manually,
without much fear.

------
mattwad
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."

------
rubiquity
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.

~~~
mariusc23
It would be sweet to have a grunt plugin that scans your CSS and templates and
removes unused rules. It would probably have to read JS files to be thorough
though.

------
dvcc
First thought was that this should be a grunt plugin, then I read the
comments. Here it is: [https://github.com/addyosmani/grunt-
uncss](https://github.com/addyosmani/grunt-uncss)

~~~
brokenparser
I thought there should be a Gulp plugin, and then I found this:
[https://www.npmjs.org/package/gulp-
uncss/](https://www.npmjs.org/package/gulp-uncss/)

~~~
ehynds
I thought there should be a Broccoli plugin, and then I found this:
[https://github.com/sindresorhus/broccoli-
uncss](https://github.com/sindresorhus/broccoli-uncss)

------
silversmith
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.

------
harlanji
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!

------
eli
Neat. There's also a Firebug extension that does this:
[https://addons.mozilla.org/en-us/firefox/addon/css-
usage/](https://addons.mozilla.org/en-us/firefox/addon/css-usage/) A little
rough around the edges, but it works.

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.

~~~
alex_doom
>only after some interaction with javascript on the page

That's why I will use a prefix js-[something] for elements that will interact
with javascript and then user other classes for style so nothing gets removed
by accident by others.

~~~
eli
Smart. I end up grepping the whole codebase by hand for each class I want to
remove, but even that isn't perfect.

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

------
baby
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.

------
tomswartz07
If you're an ArchLinux AUR user, here's the package:
[https://aur.archlinux.org/packages/nodejs-
uncss](https://aur.archlinux.org/packages/nodejs-uncss)

------
hit8run
I prefer
[https://github.com/peterbe/mincss](https://github.com/peterbe/mincss) It's
based on python :)

------
3minus1
I don't see how this could work on a single page application where only a
small fraction of the content is loaded on page-load.

------
chris_mahan
I'm using css less and less these days, and letting the browser decide how to
render html5 on its own...

------
thenerdfiles
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.

I'm thinking about building URL workflows (stored in arrays) and passing
authentication tokens via URL.

