Как найти неиспользуемые классы в моем HTML?

Ответ 1

Это может быть полезно: https://code.google.com/p/find-unused-classes/. Согласно описанию:

Он показывает классы, которые существуют в селекторах css и не существуют на html-странице и в стиле verse.

Как сказал Джим, будьте предупреждены, что некоторые классы могут не использоваться вашими таблицами стилей, но все еще используются в JavaScript.

Ответ 2

Это частичный ответ о том, как получить имена классов в html

var classesEvery = [];
var elementsEvery = document.querySelectorAll('*');
for (var i = 0; i < elementsEvery.length; i++) {
  var classes = elementsEvery[i].className.toString().split(/\s+/);
  for (var j = 0; j < classes.length; j++) {
    var thisClass = classes[j];
    if (thisClass && classesEvery.indexOf(thisClass) === -1)
      classesEvery.push(thisClass);
  }
}

Можно получить имена классов в html файле, используя этот код Javascript. Для получения всех классов, используемых в CSS, попробуйте list-selectors. Все еще думая о том, как получить имена классов, используемые в Javascript angularJS. Добавлен рабочий фрагмент со случайными классами HTML для проверки js.

var classesEvery = [];
var elementsEvery = document.querySelectorAll('*');
for (var i = 0; i < elementsEvery.length; i++) {
  var classes = elementsEvery[i].className.toString().split(/\s+/);
  for (var j = 0; j < classes.length; j++) {
    var thisClass = classes[j];
    if (thisClass && classesEvery.indexOf(thisClass) === -1)
      classesEvery.push(thisClass);
  }
}
console.log(classesEvery);

.hidden {
  display: none;
}

<!-- Some random HTML code. -->
<div ng-controller="HomeController" class="container hidden">

  <span>Simple Notifications:</span>
  <div class="rows">
    <div class="col-md-2"><button class="btn btn-primary" href ng-click="simple()">Simple notification</button></div>
    <div class="col-md-2"><button class="btn btn-warning" href ng-click="warning()">Warning notification</button></div>
    <div class="col-md-2"><button class="btn btn-success" href ng-click="success()">Success notification</button></div>
    <div class="col-md-2"><button class="btn btn-danger" href ng-click="error()">Error notification</button></div>
    <div class="col-md-2"><button class="btn btn-grimace" href ng-click="wait()">Wait notification</button></div>
    <div class="col-md-2"><button class="btn btn-primary" href ng-click="pop()">Link to other page</button></div>
  </div>
  <hr/>
  <span>Addding Option from Script:</span>
  <div class="rows">
    <div class="col-md-6">
      <Span>With CLose button</span>
      <button class="btn btn-primary" href ng-click="close()">Close Button </button>
    </div>
    <div class="col-md-6">
      <Span>Fade after 1 Sec</span>
      <button class="btn btn-primary" href ng-click="timeout()">Html notification</button>
    </div>
  </div>
  <br/>
  <hr/>
  <span>Custom Notification and Body output type:</span>
  <div class="rows">
    <div class="col-md-3"><button class="btn btn-primary" href ng-click="Custom_temp()">Custom template</button></div>
    <div class="col-md-3"><button class="btn btn-primary" href ng-click="trusted_html()">Trusted HTML</button></div>
    <div class="col-md-3"><button class="btn btn-primary" href ng-click="default_temp()">Default Template</button></div>
    <div class="col-md-3"><button class="btn btn-primary" href ng-click="file_custom_temp()">Including file from Folder</button></div>
  </div>
  <script type="text/ng-template" id="myTemplate.html">
    <div class="Custom_temp_html">
      <p>Notice, custom temlate is not in the list</p>
    </div>
  </script>
</div>

Ответ 3

Инспектор HTML из https://github.com/philipwalton/html-inspector имеет в качестве одной из своих функций:

• Неиспользуемые классы: иногда вы удаляете правило CSS из своей таблицы стилей, но забываете удалить класс из HTML. Правило "unused-classes" сравнивает все селекторы классов в CSS с классами в HTML и сообщает о тех, которые не используются.

  Классы, которые находятся в HTML как хуки JavaScript, могут игнорироваться через белый список. По умолчанию любой класс с префиксом js-, language- или supports- находится в белом списке. Более подробную информацию об обосновании этого правила можно найти здесь.

В его FAQ вы найдете букмарклет.

Или добавьте его через тег script:

<script src="http://cdnjs.cloudflare.com/ajax/libs/html-inspector/0.8.2/html-inspector.js"></script>

И запустить с этим фрагментом:

HTMLInspector.inspect(["unused-classes"]);

Комментарий Эндрю Гримма указывает на то, что этот проект больше не поддерживается (последний коммит декабрь 2017). К счастью, он все еще функционирует (проверено в июне 2019 года).

Существует также грубая несекретность, но этот проект кажется мертвым (последний коммит декабрь 2014).

Ответ 4

Инструмент grunt-unclassify выглядит многообещающим, хотя его использование не кажется простым:

https://medium.com/@mariusc23/remove-unused-css-classes-in-html-bbb856da8bdf#.55u0uokfb

Ответ 5

Когда передается HTMLElement, следующий код выводит неиспользуемые классы и идентификаторы:

function unused(e) {
  const s0 = JSON.stringify(window.getComputedStyle(e));
  const c = Array.from(e.classList.values());
  if (c.length !== 0) {
    c.forEach(cc => {
      e.classList.remove(cc);
      const s = JSON.stringify(window.getComputedStyle(e));
      if (s0 === s) {
        console.log('class ${cc} is unused');
      }
      e.classList.add(cc);
    });
  }
  const id = e.id;
  if (id) {
    e.removeAttribute("id");
    const s = JSON.stringify(window.getComputedStyle(e));
    if (s0 === s) {
      console.log('id ${id} is unused');
    }
    e.id = id;
  }
}

Он работает, извлекая стиль элемента с помощью window.getComputedStyle(), а затем удаляя классы один за другим и проверяя, остается ли стиль тем же.

(Если вы хотите версию HTML с удаленными посторонними классами и идентификаторами, измените код так, чтобы классы добавлялись повторно только в том случае, если они повлияли на стилизацию, рекурсивно вызывайте функцию на всех дочерних узлах и затем используйте XMLSerializer. serializeToString для сериализации ДОМ.)