1

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

Community
  • 1
  • 1
tobib
  • 2,114
  • 4
  • 21
  • 35
  • 1
    i know only one way - look at chrome audits panel. it shows unused css – kirugan Apr 29 '13 at 07:51
  • http://stackoverflow.com/questions/135657/tool-to-identify-unused-css-definitions?rq=1 – kirugan Apr 29 '13 at 07:52
  • i saw a project about that on github but i cant remember its name. but its easier to maitain css with a css framework or splitting css files into multiple ones. – mpm Apr 29 '13 at 07:53
  • One approach would be to set (for example) the background color of the codes you wish to remove to (for example) red. So when you navigate the site. when you never see red background you can pretty safely remove that code. The main problem with css removal is, that depending webbrowser, outputmedia, OS other parts of a CSS might be used (or not) So there is no fool proof system to find unused css stuff. – André Schild Apr 29 '13 at 07:54
  • 1
    The first question you linked to mentions a Firefox tool that even spiders the entire app, and the second mentions the Chrome audit tool. "Not possible to automatically check for unused CSS" is an interesting interpretation. – JJJ Apr 29 '13 at 07:54
  • @juhana spidering can not find html generated by javascript. audit tool can only analyze the current state of the page. – tobib Apr 29 '13 at 07:55
  • 1
    The tools already mentioned will give you a basic understanding of what the site is using and what isn't being used. However extensive testing and analysis really, honestly, is the only way you'll get a definitive answer, because at the end of the day if a style is used only once in one obscure set of circumstances, then it is used. But it might take quite a bit of effort to prove it. It's a fundamental truth (that goes way beyond css testing!): Proving that something exists is easy; providing conclusively that something doesn't exist is extremely difficult and time consuming. – Spudley Apr 29 '13 at 09:11
  • Just a thought: What could help would be to make sure there is no logic in your HTML templates - especially business code that delivers things like class names to be inserted into the template. One step to that could be to explicitly use a logic less templates such as [mustache](http://mustache.github.io/). Based on that it would be possible to have a script to generate all theoretically possible HTML. – RoToRa Apr 29 '13 at 09:44
  • @Spudley I guess your comment is close to qualifying as an answer. What I miss though is some advise on what to do in actual practice (when extensive testing is not an option). – tobib May 01 '13 at 15:45

1 Answers1

0

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.

tobib
  • 2,114
  • 4
  • 21
  • 35