
Ask HN: How do you find unused CSS? - tmaly
what tools do you use to find unused css in your web pages?
======
LorenzoLlamas
Surely you all jest. Simple script in Any Real Language to scan your HTML and,
if desired by all you JS junkies, your JS and compare your CSS to each page
and spit out report by frequency of us on each page.

From not-used to most used. So, example:

0 .hr

1 .dt index.html

7 .h1 index.html (5)

    
    
          about.html (2)
    
    

Something like that.

But seriously, does anyone really care about performance anymore? Nah! Just
stick all your bloated code to the browser and someone else's bandwidth,
right?

We lost the battle once Eric Meyer started extolling resets. Never mind that
99% of sites that use a Reset never even bother to delete the rules they don't
use (and likely never would).

I just got done trying to view a simple five paragraph article on CNN which
had three popups (thanks JS!): a TOS update which I didn't read, a "breaking
news" banner about an arrest in Brussels (also not read), and on obnoxious
video ad from AT&T. After three minutes and two refreshes, I gave up when
everything on the page loaded, including the thumbnails and images to a dozen
other "related" articles, as well as summary headlines in business, world, etc
- everything _but_ the last three paragraphs of what I actually came there to
read. So excuse me if I'm jaded. Hating the poor performance of all internets
right now, particularly on mobile.

And don't even get me started on the concept that CSS per-page exceptions
could benefit from inclusion in the HTML code (gasp! inline!). Another whole
pet peeve of mine. Don't even try and babble about browser caching "benefits"
to me. We both know it's a wash and a lazy developer excuse. Fine tune, fine
tune, fine tune. That's your job, so someone please start doing it.

------
Someone1234
There's no good tool that I'm aware of because it ultimately requires a CSS
profiler, not a static analysis.

So you can load a page, get all of the unused selectors, removed said
selectors, and then have your entire site break. Why? Because dynamic elements
don't exist in the DOM and people have per site CSS rather than per page CSS.

Ideally what you need is some tool that you start, use the site, then stop and
it marks any CSS it didn't "see" used throughout that time. But I don't know
of such a tool.

Sorry if this isn't super helpful. I am more just saying "I have looked, never
found anything."

~~~
tmaly
Thanks for your post, it gave me an idea. I remember this write up on
inserting code into Go to do tracing, the code was called GoWeave
[https://github.com/deferpanic/goweave](https://github.com/deferpanic/goweave)

My thought was, what if we used something like SASS to generate the css. We
then automatically inserted some type of numbered 1 pixel gif background image
rules into each aspect of the SASS, ran the page though some automated
browser/mobile tests, had the server record formatted logs for these 1 pixel
gifs, then finally created a detailed report that had the mapping of 1 pixel
gifs back to the sass/css aspect.

------
vincent_s
Chrome's Developer Tools give you some insights:

1) Open a webpage in Chrome & press F12

2) Click on "Audits" tab

3) Choose "Reload Page and Audit on Load" at the bottom and click "Run"

4) Look at "Remove unused CSS rules"

------
debacle
How dynamic is your application? The answer is heavily dependent. If your
application is mostly static, you can just use a tool that can convert CSS
selectors to XPath selectors and scan your site for those elements. If your
site is highly dynamic, the solution is much more difficult and likely
involves a certain level of browser automation.

~~~
brianwawok
What kind of tools do you suggest?

Google shows me:

[https://davidwalsh.name/uncss](https://davidwalsh.name/uncss) (I think for
dynamic)

[https://unused-css.com/](https://unused-css.com/) (I think also works for
dynamic)

and a bunch more

~~~
debacle
You could write a clever script in 50-100 lines. Most languages have css to
xpath libraries.

