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

Question

有很多工具可以在样式表中查找未使用的 CSS 规则，例如Chrome Audits和 Firefox 的Dust-Me Selectors插件（遗憾的是与 Firefox Quantum 不兼容）。

但是反过来呢？

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

Answer 1

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

它显示了存在于 css 选择器中并且不存在于 html 页面和 like-verse 中的类。

正如 Jim 所说，请注意，您的样式表可能未使用某些类，但仍在 JavaScript 中使用。

Answer 2

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

• 未使用的类：有时您会从样式表中删除 CSS 规则，但忘记从 HTML 中删除该类。“未使用类”规则将 CSS 中的所有类选择器与 HTML 中的类进行比较，并报告任何未使用的类。

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

在其常见问题解答中，您会找到一个书签。

或者通过脚本标签添加它：

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

并使用此代码段运行：

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

Andrew Grimm 的评论指出该项目不再维护（最后一次提交于 2017 年 12 月）。幸运的是，它似乎仍然可以正常工作（2019 年 6 月测试）。

还有grunt-unclassify但该项目似乎已死（最后一次提交于 2014 年 12 月）。

Answer 3

这是关于如何在 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 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()，然后逐个删除类并检查样式是否仍然相同。

（如果您想要删除无关类和 id 的 HTML 版本，则修改代码以仅在影响样式的情况下重新添加类，在所有子节点上递归调用该函数，然后用于XMLSerializer. serializeToString序列化 DOM。 )