Safely remove chunks of CSS from webapp

Question

I know there are several questions concerning unused CSS already, e.g. How can I find unused images and CSS styles in a website? or how can i find unused css in ajax app?

As I understand from these questions and the answers given there it is currently not possible to automatically check for unused CSS for a complete webapp. The problem seems to be that it is nearly impossible to get all HTML that could ever be generated, even if you have access to the source code.

Also note that in my case I want to verify that some CSS is not used rather than finding it in the first place.

Still I guess removing unused CSS is a common task. So how is it done in real-life? I actually have to do this for a larger project. My current plan is to remove some CSS, test it manually and then wait for bug reports. I really hope there is a better way.

Edit: I just realized that this question is not really CSS specific. So when I broadened my search I found What is the best way to remove dead code from your application?. The answer given there mainly says it "is only possible with a really extensive set of tests" (which is not an option for me).

Answer 1

There is no exact solution, but a good workaround I found on css wizardry:

Add something like this to your css:

#suspicious_selector {
  background-image: url('/assets/img/dead/suspicious_selector.gif');
}

After some time check for requests to that file. If there were no requests, it is mostly safe to remove the selector.