有没有办法在网站上找到未使用的CSS？

Question

有没有办法在网站上找到未使用的CSS？

我正在尝试清理我刚刚继承的项目。

Answer 1

Dust-me Selectors是一个Firefox插件，可以找到未使用的选择器。

Answer 2

我刚刚遇到这个并记住了你的问题：http://github.com/geuis/helium-css

Answer 3

自从2017-04：https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage

以来，Chrome 59内置了CSS和JavaScript的覆盖显示

您可以通过打开开发工具，然后打开命令菜单（Mac上的Cmd+Shift+P或Windows和Linux上的Ctrl+Shift+P）来启用它，然后输入“show coverage”。

Answer 4

关于CSS的最佳实践方法有很多可以说的。我会尽力坚持要点。

使用CSS重置。

尝试删除真正的常规CSS语句，例如h1 {}和#container em {}。您最好使用h1.section-title和#container em.important {}，因为如果您选择在文档中的某个位置使用h1或em，那么您就不会这样做不得不担心覆盖任何现有代码。

如果您不需要，请不要在CSS选择器中过于具体。如果在特定部分中更改元素的显示方式，您实际上只需要具有高度的特异性。否则，为了使您的block类的代码可以重复使用，#container .content .block ...在许多情况下可以缩减为.block ...。

查找CSS中的共性，看看是否可以创建可重用的类。如果您有类似的广告代码class="favorites"和class="popular"，请将其转为class="block block-favorites"和class="block block-popular"，并将共性放入.block。

养成在CSS中使区域具有自动宽度（可以隐式完成）以便它们增长到容器宽度的习惯。这使得将部分从网站的狭窄部分移动到网站的大部分内容变得非常容易，而无需更改任何代码。

评论您的代码并将其分解为部分通常有助于使代码更具可读性。

当您实现更强大的CSS选择器时，您会惊讶于代码看起来更清晰。其中大多数是跨浏览器兼容的（Internet Explorer 7及更高版本） 一些有价值的资源：When can I use... - Quirks Mode on CSS Selectors - w3 on CSS Selectors

  

回答：
  Best Practices for Cleaning up Existing CSS/unused styles

Answer 5

要添加到@cweiske建议，谷歌浏览器有一个毫无意义的方式来揭示你的“未使用”和“永远不会被使用”选择器的位置。

我已经发布了一个屏幕截图，介绍了如何使用分步标记启动CSS Coverage工具。

这是一种可靠的方法来确定你真正没有使用的东西。