Ask HN: How do you find unused CSS? | Hacker News Reader

Ask HN: How do you find unused CSS?

12 pointstmaly10 comments

what tools do you use to find unused css in your web pages?

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.

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

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

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.

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

You can probably make a tool which works 90% of the time but it's an unsolvable problem to completely automate given the dynamic nature of web and JavaScript code.

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"

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.

What kind of tools do you suggest?

Google shows me:

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

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

and a bunch more

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

initially I would start with a static layout. I would want to optimize the css and what is actually used for both desktop and mobile. After that, I would convert the static layout to a dynamic template.

Even that isn't as simple as it seems. Your site may have h3 elements, but that does not mean that your h3 rule will be used. Maybe all of your h3 elements are covered by more specific rules, such as ones checking for h3 in a div, or for h3 followed by a p.

Reply on news.ycombinator.com