Hacker News Reader

Comment by simonw | Hacker News Reader

I've been looking into this kind of tool for a while, but none of them are quite right for my purpose. I don't want a tool that spits out just-the-CSS-that-is-used, I want a tool that shows me blocks of CSS that it thinks are NOT used - ideally after I've loaded a number of different pages in a browser.

My use-case is for analyzing a large, existing website that has many years of accumulating CSS, and getting a feel for which blocks of code can be safely eliminated.

I'm pretty sure what I'm after needs a full-blown DOM to work effectively - either with something like PhantomJS or even running as a Chrome Extension. So far I haven't seen anything that fits the bill.

View on HN

I honestly think this needs to be a part of Chrome Dev Tools's profiler. Already it's able to record sessions that persist across page loads, and tracks what CSS selectors are applied and which properties are overridden. I don't think it's much of a stretch to add a feature like this.

+1 for something along these lines to be available in all vendor's dev tools!

Agreed! We need something that collects data from multiple pages as you browse through and use your site. At the end it gives you a table of all your classes that didn't match anything (with line number references to your css file).

Though you need to manually visit all those pages. And it wouldn't be easy to traverse DOM with those server side logic/condition.

IMHO, do it offline and out of browser would be easier. But I also think doing it directly with the codes can be hard too since there are so many way that those css will be added to templates.

Unless the pages are dynamically generated

Firefox dev tools have something like that (experimental)

https://developer.mozilla.org/en-US/docs/Tools/CSS_Coverage

https://github.com/geuis/helium-css

I have used a Firefox extension called Dust-Me Selectors[1] which does this. It breaks your css into used and unused selectors, it can spider the site for you, or you can leave it running as you browse the site and it will work automatically. Definitely slows things down though while you're using it.

1: https://addons.mozilla.org/en-US/firefox/addon/dust-me-selec...

100% safety is pretty difficult, but take a look at the tool described here starting at slide 60, http://talks.desp.in/fronteers2014

It's fairly easy to roll your own version of this and do analysis.

I might be wrong but I'm glad to see you try using this REGEX https://news.ycombinator.com/item?id=9708629

How about running a diff on pre-purify versus post-purify?

Chrome dev tool's audit tab has an "unused CSS" section. Have you tried that?

Thanks, didn't know this was there. It is somewhat buried, but does give you a list of unused selectors.

I built something like this at my old company. Scrape every tag on the current page, subtract this array of used tags against all the tags in the CSS. Didn't take too long to build.

Reply on news.ycombinator.com