<p>Is there a method (other than trial and error) I can use to find unused image files? How about CSS declarations for ID's and Classes that don't even exist in the site?</p>

<p>It seems like there might be a way to write a script that scans the site, profile it, and see which images and styles are never loaded.</p>

[{'answer_id': 33254, 'author': 'Polsonby', 'author_id': 137, 'author_profile': 'https://Stackoverflow.com/users/137', 'pm_score': 2, 'selected': False, 'text': "<p>I seem to recall either Adobe Dreamweaver or Adobe Golive having a feature to find both orphaned styles and images; can't remember which now. Possibly both, but the features were well-hidden.</p>\n"}, {'answer_id': 33318, 'author': 'BCS', 'author_id': 1343, 'author_profile': 'https://Stackoverflow.com/users/1343', 'pm_score': 4, 'selected': False, 'text': '<p>At a file level:</p>\n\n<p>use wget to aggressively spider the site and then process the http server logs to get the list of files accessed, diff this with the files in the site</p>\n\n<pre><code>diff \\\n &lt;(sed some_rules httpd_log | sort -u) \\\n &lt;(ls /var/www/whatever | sort -u) \\\n | grep something\n</code></pre>\n'}, {'answer_id': 9572622, 'author': 'Șerban Ghiță', 'author_id': 976827, 'author_profile': 'https://Stackoverflow.com/users/976827', 'pm_score': 6, 'selected': False, 'text': '<p>You don\'t have to pay any web service or search for an addon, you already have this in Google Chrome under F12 <code>(Inspector)-&gt;Audits-&gt;Remove unused CSS rules</code></p>\n\n<p>Screenshot:<img src="https://i.stack.imgur.com/Soozt.png" alt="Screenshot"></p>\n\n<p><strong>Update: 30 Jun, 2017</strong></p>\n\n<p>Now Chrome 59 provides <strong>CSS and JS code coverage</strong>. See <a href="https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage" rel="noreferrer">https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage</a></p>\n\n<p><a href="https://i.stack.imgur.com/eBWA1.png" rel="noreferrer"><img src="https://i.stack.imgur.com/eBWA1.png" alt="enter image description here"></a></p>\n'}, {'answer_id': 32874830, 'author': 'toddmo', 'author_id': 1045881, 'author_profile': 'https://Stackoverflow.com/users/1045881', 'pm_score': 1, 'selected': False, 'text': '<p>This little tool gives you a list of the css rules in use by some html.</p>\n\n<p>Here it is on <a href="http://codepen.io/tmorrow-hyphensolutions/pen/GprdRQ" rel="nofollow">Code Pen</a></p>\n\n<p>Click on <kbd>Run code snippet</kbd>, then click on <kbd>Full page</kbd> to get in to it. Then follow the instructions in the snippet. You can run it full page to see it work with your html / css.</p>\n\n<p>But it\'s easier just to bookmark my code pen as a tool.</p>\n\n<p><div class="snippet" data-lang="js" data-hide="false">\r\n<div class="snippet-code">\r\n<pre class="snippet-code-js lang-js prettyprint-override"><code>/* CSS CLEANER INSTRUCTIONS\r\n   1. Paste your HTML into the HTML window\r\n   2. Paste your CSS into the CSS window\r\n   5. The web page result now ends with a list of just the CSS used by your HTML!\r\n*/\r\n\r\nfunction cssRecursive(e) {\r\n  var cssList = css(e);\r\n  for (var i = 0; i &lt; e.children.length; ++i) {\r\n    var childElement = e.children[i];\r\n    cssList = union(cssList, cssRecursive(childElement));\r\n  }\r\n  return cssList;\r\n}\r\n\r\nfunction css(a) {\r\n  var sheets = document.styleSheets,\r\n    o = [];\r\n  a.matches = a.matches || a.webkitMatchesSelector || a.mozMatchesSelector || a.msMatchesSelector || a.oMatchesSelector;\r\n  for (var i in sheets) {\r\n    var rules = sheets[i].rules || sheets[i].cssRules;\r\n    for (var r in rules) {\r\n      if (a.matches(rules[r].selectorText)) {\r\n        o.push(rules[r].cssText);\r\n      }\r\n    }\r\n  }\r\n  return o;\r\n}\r\n\r\nfunction union(x, y) {\r\n  return unique(x.concat(y));\r\n};\r\n\r\nfunction unique(x) {\r\n  return x.filter(function(elem, index) {\r\n    return x.indexOf(elem) == index;\r\n  });\r\n};\r\n\r\ndocument.write("&lt;br/&gt;&lt;hr/&gt;&lt;code style=\'background-color:white; color:black;\'&gt;");\r\nvar allCss = cssRecursive(document.body);\r\nfor (var i = 0; i &lt; allCss.length; ++i) {\r\n  var cssRule = allCss[i];\r\n  document.write(cssRule + "&lt;br/&gt;");\r\n}\r\ndocument.write("&lt;/code&gt;");</code></pre>\r\n</div>\r\n</div>\r\n</p>\n'}, {'answer_id': 40725374, 'author': 'Abhinav Galodha', 'author_id': 1696326, 'author_profile': 'https://Stackoverflow.com/users/1696326', 'pm_score': 2, 'selected': False, 'text': '<p>Chrome canary build has an option in the developer toolbar for "<strong>CSS Coverage"</strong> as one of the experimental developer features. This options comes up in the timeline tab and can be used for getting a list of the unused CSS.</p>\n\n<p><a href="https://i.stack.imgur.com/47hXp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/47hXp.png" alt="enter image description here"></a></p>\n\n<p>Please note that you would need to enable this feature in the settings in the developer toolbar too. This feature should probably make it to official chrome release. </p>\n\n<p><a href="https://i.stack.imgur.com/H6O1d.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/H6O1d.png" alt="enter image description here"></a></p>\n'}]
['https://Stackoverflow.com/questions/33242', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/5/']