如何在我的HTML中找到未使用的类？

Question

有很多工具可以在样式表中查找未使用的CSS规则,例如Chrome Audits和Firefox 的Dust-Me选择器附件(遗憾的是与Firefox Quantum不兼容).

但另一种方式呢？

如何找到我的HTML中的类,这些类在我的样式表中不存在？

Answer 1

这可能会有所帮助:https://code.google.com/p/find-unused-classes/.根据描述:

它显示了存在于css选择器中的类,并且不存在于html页面和类似节点上.

正如Jim所说,请注意,某些类可能未被样式表使用但仍在JavaScript中使用.

Answer 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);
  }
}

可以使用此Javascript代码获取html文件中的类名称.要获取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>

Answer 3

来自https://github.com/philipwalton/html-inspector的 HTML Inspector 将此作为其功能之一:

• 未使用的类:有时您会从样式表中删除CSS规则但忘记从HTML中删除该类."unused-classes"规则将CSS中的所有类选择器与HTML中的类进行比较,并报告任何未使用的类.

  可以通过白名单忽略HTML中作为JavaScript挂钩的类.默认情况下,任何类前缀js-,language-或者supports-被列入白名单.有关此规则背后的基本原理的更多信息,请参见此处.

在其常见问题解答中,您将找到一个书签.

还有grunt-unclassify,但该项目似乎已经死了.