Кажется, я вспоминаю либо Adobe Dreamweaver, либо Adobe Golive с функцией поиска как лишенных стиля стилей, так и изображений; не могу вспомнить, что сейчас. Возможно оба, но функции были хорошо скрыты.

На уровне файлов:

используйте wget для агрессивного паука на сайте, а затем обработайте логи http-сервера, чтобы получить список файлов, к которым обращались, и сопоставьте их с файлами на сайте

diff \
 <(sed some_rules httpd_log | sort -u) \
 <(ls /var/www/whatever | sort -u) \
 | grep something

TopStyle имеет набор инструментов для поиска и работы с классами-сиротами. Он также предоставит вам отчеты о том, где идентификаторы и классы используются в HTML, что позволит вам быстро открыть и перейти к соответствующей разметке. Вот реклама на сайте, касающаяся этой функции:

Отчеты о сайте. Сразу видно, где на вашем сайте используются стили. Узнайте, где вы применили классы стилей, которые не определены ни в одной из таблиц стилей, или посмотрите, какие классы стилей, которые вы определили, не используются.

Очень полезно для разбора незнакомых сайтов.

Тем не менее, он не находит неиспользуемые изображения.

CSS Redundancy Checker - это инструмент, который вы запускаете локально, передавая таблицу стилей и список URL-адресов или каталог HTML-файлов. Вот описание, приведенное на сайте инструмента:

Простой скрипт, который, учитывая таблицу стилей CSS и файл .txt со списком URL-адресов файлов HTML, или каталог файлов HTML, будет перебирать их все и перечислять операторы CSS в таблице стилей, которые никогда не вызываются в HTML.

По сути, это помогает вам сохранять ваши CSS-файлы актуальными и компактными. И это достаточно точно.

Я нашел этот инструмент, который работает со всеми версиями Firefox! Чтобы понять, как это работает, требуется некоторое время, но, как только он начинается, это кажется довольно хорошим. Это сохранит новую версию CSS с выделенными CSS-селекторами, чтобы вы могли быстро вернуться, если вам нужно.

Использование CSS - Firefox Addon

Вам не нужно платить за какой-либо веб-сервис или искать дополнение, у вас уже есть это в Google Chrome под F12 (Inspector)->Audits->Remove unused CSS rules

Скриншот:

Обновление: 30 июня 2017

Теперь Chrome 59 обеспечивает покрытие кода CSS и JS . См. Https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage.

Чтобы ответить на ваш вопрос об инструменте для поиска неиспользуемых файлов изображений, вы можете использовать Xenu Link Sleuth, чтобы найти ваш сайт и найти все изображения, которые использует ваш сайт. Затем Xenu запросит у вас доступ по ftp, чтобы он мог сканировать ваши каталоги, чтобы найти потерянные файлы. Я еще не использовал его на производственном сервере, но это звучит достойно изучения.

РЕДАКТИРОВАТЬ: Вы просто должны быть осторожны, чтобы не удалять изображения, которые используются JavaScript.

Как отметил Тим Мёрто в блоге A List Apart, « Два инструмента для поддержания чистоты вашего CSS »:

csscss

csscss проанализирует все файлы CSS, которые вы передаете, и сообщит, какие наборы правил имеют дублированные объявления.

И наиболее актуален вопрос:
гелий-ксс

Helium - это инструмент для обнаружения неиспользуемого CSS на многих страницах веб-сайта.

Инструмент основан на JavaScript и запускается из браузера.

Helium принимает список URL-адресов для разных разделов сайта, затем загружает и анализирует каждую страницу, чтобы создать список всех таблиц стилей. Затем он посещает каждую страницу в списке URL-адресов и проверяет, используются ли на страницах селекторы, найденные в таблицах стилей. Наконец, он генерирует отчет, который детализирует каждую таблицу стилей и селекторы, которые не были найдены для использования ни на одной из указанных страниц.

Все инструменты, перечисленные здесь, отлично подходят для CSS. Я не знаю о Dreamweaver & Co. Но недавно я создал небольшую программу, чтобы помочь мне очистить проекты моего веб-сайта.

Найти-Неиспользованные-Files

Это не помогает с CSS и прочим, но вместо этого с потерянными изображениями и другими типами файлов.

Надеюсь, поможет!

Этот маленький инструмент дает вам список правил CSS, используемых некоторыми HTML.

Вот это на Code Pen

Нажмите Run code snippet, затем нажмите, Full pageчтобы войти в него. Затем следуйте инструкциям во фрагменте. Вы можете запустить его на полную страницу, чтобы увидеть, как он работает с вашим HTML / CSS.

Но проще просто пометить мою ручку кода как инструмент.

/* CSS CLEANER INSTRUCTIONS
   1. Paste your HTML into the HTML window
   2. Paste your CSS into the CSS window
   5. The web page result now ends with a list of just the CSS used by your HTML!
*/

function cssRecursive(e) {
  var cssList = css(e);
  for (var i = 0; i < e.children.length; ++i) {
    var childElement = e.children[i];
    cssList = union(cssList, cssRecursive(childElement));
  }
  return cssList;
}

function css(a) {
  var sheets = document.styleSheets,
    o = [];
  a.matches = a.matches || a.webkitMatchesSelector || a.mozMatchesSelector || a.msMatchesSelector || a.oMatchesSelector;
  for (var i in sheets) {
    var rules = sheets[i].rules || sheets[i].cssRules;
    for (var r in rules) {
      if (a.matches(rules[r].selectorText)) {
        o.push(rules[r].cssText);
      }
    }
  }
  return o;
}

function union(x, y) {
  return unique(x.concat(y));
};

function unique(x) {
  return x.filter(function(elem, index) {
    return x.indexOf(elem) == index;
  });
};

document.write("<br/><hr/><code style='background-color:white; color:black;'>");
var allCss = cssRecursive(document.body);
for (var i = 0; i < allCss.length; ++i) {
  var cssRule = allCss[i];
  document.write(cssRule + "<br/>");
}
document.write("");

Helium CSS - отличный инструмент для этого. Однако следует отметить, что вы должны запускать этот инструмент в разрабатываемой или локальной версии вашего сайта. Если вы запустите это в рабочей версии, ваши посетители смогут увидеть тестовую среду Helium.

https://github.com/geuis/helium-css

http://www.unknownerror.org/opensource/geuis/helium-css

Chrome canary build имеет опцию на панели инструментов разработчика для « CSS Coverage» в качестве одной из экспериментальных функций разработчика. Эта опция появляется на вкладке временной шкалы и может быть использована для получения списка неиспользуемых CSS.

Обратите внимание, что вам необходимо включить эту функцию в настройках на панели инструментов разработчика тоже. Эта функция, вероятно, должна появиться в официальном выпуске Chrome.