如何在样式表中找到未使用/未应用的CSS规则?


18

我有一个巨大的CSS文件和一个HTML文件。我想找出显示HTML文件时未使用哪些规则。是否有用于此的工具?

CSS文件已经发展了几年,据我所知,没有人删除过其中的任何内容-人们只是一次又一次地编写新的覆盖规则。

编辑:建议使用Dust-Me选择器或Chrome的网页性能工具。但是它们都在选择器级别上起作用,而不是在单个规则上起作用。在很多情况下,选择器中的规则总是会被覆盖-这就是我最想摆脱的规则。例如:

body { color: white; padding: 10em; }
h1 { color: black; }
p { color: black; }
...
ul { color: black; }

HTML中的所有文本都在某些wrapper元素内,因此它绝不会是白色的。body的填充始终有效,因此当然body不能删除整个选择器。我也想摆脱这种无用的规则。

编辑:另一种无用规则的情况:当它复制现有一个而不更改任何内容时:

a       { margin-left: 5px; color: blue; }
a:hover { margin-left: 5px; color: red; }

我很乐意摆脱第二个margin-left……在我看来,这些工具似乎找不到这些东西。

编辑:我感谢所有的答案,但可惜您建议的工具并没有提出任何有用的建议。我对您的答案进行了投票,但我将等待如上所述的工具来做更细粒度的操作。

谢谢,


您可能会缺少任何合适的工具作为机会:由于您了解自己的需求,因此您可能是创建此类工具的最佳人选。您可以检查现有工具的思想和技术代码,然后构建在规则级别而不是选择器级别起作用的代码。您的名利双收!...嗯,也许只是名望;)
iconoclast

@布兰登:这个问题只是打了“显着问题”的标记……所以你可能是对的:-)
liori 2012年

Answers:


8

Dust Me Selecters Firefox扩展

在Chrome的开发人员工具中,您可以使用网页性能工具查找未使用的CSS规则。


太好了,我会立即检查!
liori 2011年

这些工具只能删除无用的选择器。我澄清了我的问题。
liori 2011年

2
@liori:我认为这不可能。在您的边距示例中,第二个边距规则可能看起来是多余的,但是它具有更高的特异性,并且可以覆盖后面的规则。例如,如果一个类.abc的边距不同,<a class="abc">我认为会在悬停时更改其边距。现在这可能不是您想要的,但肯定可以,并且您不能盲目删除该重复规则。
DisgruntledGoat

@DisgruntledGoat:我正在考虑一个封闭世界的情况:如果未指定,则不存在。因此,如果a.abcHTML中没有的定义,或者在HTML中的任何地方都没有<a class="abc"/>,那么它就不存在。无论如何,我已经完成了提示我在这里提出这个问题的任务,然后我结束了运用了很多启发式方法 我尝试使用Chrome的开发人员工具,但对我没有太大帮助。
liori 2011年

5

您也可以查看Unused-CSS.com。此工具将浏览您的页面并构建优化的CSS文件,而无需使用未使用的选择器


4

我一直很喜欢CSS用法。它是Firebug的插件,让您扫描页面并查看未应用哪些CSS规则。它甚至可以自动扫描并在多个页面上工作。


2

检查uncss,它是一个节点模块。

“ UnCSS是一种可从样式表中删除未使用的CSS的工具。它可跨多个文件工作并支持注入Javascript的CSS。”

https://www.npmjs.com/package/uncss

评论后编辑:

我认为您要求的是两件事:

  1. 自动删除未使用的规则,这是uncss可以为您执行的操作。我也制作了CSS byebye这个工具,但是它不是像您要求的那样自动:https : //www.npmjs.com/package/css-byebye

  2. 优化可以合并/简化规则的样式表。

在这种情况下,我建议使用两种工具来执行此类操作:

他们或多或少地进行了相同的优化,有时一个结果要好于另一个,有时则相反。这取决于您的样式表。(您也可以一个接一个地运行:P)

我将它们用作grunt构建过程的一部分。因此,这并不是像您要求的那样直观的事情,但它们可以实现您想要的优化。

这是他们对CSSO所说的话(完整的信息在这里:https : //en.bem.info/tools/optimizers/csso/

结构优化:

  • 合并具有相同选择器的块
  • 合并具有相同属性的块
  • 删除覆盖的属性
  • 删除覆盖的速记属性
  • 删除重复的选择器
  • 块的部分合并
  • 部分分割
  • 删除空规则集和规则
  • 缩小边距和填充属性

从主页上看,它适用于选择器级别。它实际上可以删除我在问题中提到的两个示例案例中的规则吗?
liori 2015年

我已经编辑了答案。我使用CSSO网络界面测试了您的第一个示例:结果:body {color:#fff; padding:10em} h1,p,ul {color:#000}
Kev

1

@John:出色的工具,感谢您的链接

@liori:我也强烈建议您使用Firefox Web Developer插件,该插件可让您显示元素名称/属性,实时编辑css(不会写入css文件),以便您可以在不使用faff的情况下编辑和测试css更改每3秒必须保存和上传您的CSS的时间。+加载更多功能。

还有一个非常不错的DOM检查器可以插入Firebug,它也可以插入并非常适合于整理Javascript。


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.