4

I know there are several tools available to find unused CSS on a static web page. But in most real world scenarios I encounter, a lot of the CSS is used after some or the other interaction on the page, maybe a new modal opening up or an options popup etc.

In such scenarios, what would you suggest? How do I keep a tab on my ever-growing render blocking CSS?

The only way I guess one could do that is by running regular unused-css-detector type tools in conjunction with Selenium - test known interactions and see whats left unused. But a big assumption here is that I'd need to know all interactions on my page which could use new CSS. Is there a way to achieve my goal without making this assumption?

In an ideal world, I'd be able to post-back all CSS used by a visitor's browser on my page to my server. Then I'd collect data over a month, aggregate, and get a pretty accurate idea about actual unused CSS.

Any good ideas?

user1265125
  • 2,608
  • 8
  • 42
  • 65
  • http://stackoverflow.com/questions/135657/how-to-identify-unused-css-definitions – DaniP Nov 24 '16 at 20:02
  • That question asks about static analysis tools. I'm asking about static+interactions. – user1265125 Nov 25 '16 at 13:25
  • Add a listener to DOM property changes to re-run your check for unused CSS classes? Results may need to be stored somewhere over a period of time until you've got a decent list unused classes since you won't know what interaction was made. – Wild Beard Apr 13 '17 at 03:49

1 Answers1

0

I am the author of a tool that is aiming at doing what you are describing. Everywhere I worked, the CSS is this "append-only" thing that is too risky, too time-consuming to clean up. And even when you try, the ROI is so low that it not worth it.

So I am working on a tool that is very similar to what you are describing. The goal is to bring confidence on what can be removed, and to actually do it automatically by submitting pull requests.

A snippet of JavaScript is running in the browser and sends reports of what is being used to a server. Once enough data is accumulated to build some "confidence score", it can create Pull Request automatically to remove selectors that are actually not used.

It is still very early stage, but you are welcome to try it and give some feedback about it.

https://www.bleachcss.com/

Xt6
  • 56
  • 3
  • Are you doing this as a commercial project? If you're considering an open source model I'm sure me and a lot of folks in my organization would love to contribute. – user1265125 Apr 22 '17 at 12:55
  • It is kind of undefined for the moment. Please send us an email at contact@bleachcss.com so we can talk about it. We would be happy to give you access to the source, but also learn more about the project you are working on that need this clean up :) – Xt6 May 10 '17 at 01:26