有没有办法在网站中找到未使用的 CSS？
我正在尝试清理我刚刚继承的项目。
问问题
1228 次
5 回答
29
Dust-me Selectors是一个 Firefox 插件，用于查找未使用的选择器。
于 2009-08-24T03:39:20.700 回答
2
我刚刚遇到这个并记得你的问题：http: //github.com/geuis/helium-css
于 2010-01-24T23:24:47.403 回答
1
自 2017-04 以来，Chrome 59 内置了 CSS 和 JavaScript 的覆盖率显示：https ://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage
您可以通过打开开发工具、命令菜单（Cmd+Shift+P在 Mac 或Ctrl+Shift+PWindows 和 Linux 上）来启用它，然后键入“显示覆盖率”。
于 2017-07-12T15:46:25.313 回答
0
关于 CSS 的最佳实践方法有很多可以说的。我会尽量坚持要点。
使用 CSS 重置。
尝试删除真正通用的 CSS 语句，例如h1 {}and #container em {}。h1.section-title使用and会更好#container em.important {}，因为如果您选择在文档中的某处使用h1或em使用其他方式，则不必担心覆盖任何现有代码。
如果不需要，不要在 CSS 选择器中过于具体。如果在特定部分更改元素的显示方式，您实际上只需要具有高度的特异性。否则，为了使您的block类代码可重用，在许多情况下#container .content .block ...可能会减少。.block ...
在你的 CSS 中寻找共同点，看看你是否可以创建可重用的类。如果你有类似的块class="favorites"和class="popular"，把它变成class="block block-favorites"and class="block block-popular"，把共同点放进去.block。
养成让 CSS 中的区域具有自动宽度（可以隐式完成）的习惯，以便它们增长到容器的宽度。这使得将部分从网站的狭窄部分移动到网站的大部分区域变得非常容易，而无需更改任何代码。
注释您的代码并将其分解为多个部分通常有助于使代码更具可读性。
当你实现更强大的 CSS 选择器时，你会惊讶于你的代码看起来多么干净。其中大多数是跨浏览器兼容的（Internet Explorer 7 及更高版本）。
一些有价值的资源：我什么时候可以使用... - CSS 选择器上的Quirks Mode - CSS 选择器上的w3
答案来自：
清理现有 CSS/未使用样式的最佳实践
于 2011-10-21T21:22:08.270 回答
0
为了增加@cweiske 的建议，谷歌浏览器有一种严肃的方式来发现你的“未使用”和“永远不会被使用”选择器在哪里。
我已经发布了如何使用逐步标记启动 CSS Coverage 工具的屏幕截图。
这是一种可靠的方法来找出你真正没有在哪里使用东西。
于 2018-03-24T05:33:31.153 回答