Question

有很多工具可以在样式表中查找未使用的CSS规则，例如Firefox的Chrome Audits和Dust-Me Selectors附加组件（遗憾的是与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挂钩的类。默认情况下，任何以<li> <a></a> <ul> </ul> </li>，js-或language-为前缀的类都会列入白名单。有关此规则背后的基本原理的更多信息，请参见here。

In its FAQ you will find a bookmarklet

还有grunt-unclassify，但该项目似乎已经死了。

Answer 4

工具grunt-unclassify看起来很有希望，尽管它的使用并不简单：

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

Answer 5

当传递HTMLElement时，以下代码输出未使用的类和ID：

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版本，删除多余的类和ID，请修改代码以仅在影响样式的情况下重新添加类，然后在所有子节点上递归调用该函数，然后使用{{ 3}}来序列化DOM。）

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

5 个答案: