我有一个巨大的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 ...在我看来,这些工具都找不到这些东西。

编辑:我感谢所有的回答,但是遗憾的是,您建议的工具没有提出任何有用的建议。我对您的答案进行了投票,但我将等待如上所述的一种更细化功能的工具。

评论

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

@布兰登:这个问题刚好打到“显着问题”标记……所以你可能是对的:-)

#1 楼

Dust Me Selecters Firefox扩展

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

评论


太好了,我会立即检查!

– liori
2011-3-4 15:54

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

– liori
2011年3月4日在16:33

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

–心怀不满的山羊
2011-3-9在12:41



@DisgruntledGoat:我正在考虑一个封闭世界的情况:如果未指定,则不存在。因此,如果a.abc没有定义,或者HTML中的任何地方都不存在
,那么它就不存在。无论如何,我已经完成了提示我在此问题的任务,最后我应用了许多启发式方法。我尝试使用Chrome的开发人员工具,但对我没有太大帮助。

– liori
2011-3-9 15:02

#4 楼

选中uncss,它是一个节点模块。

“ UnCSS是一种工具,可从样式表中删除未使用的CSS。它可以在多个文件中工作,并支持注入Javascript的CSS。 https://www.npmjs.com/package/uncss

评论后编辑:

我想您要求的是两种不同的东西:


自动删除未使用的规则,这是uncss可以为您做的事情。
我也制作了CSS byebye这个工具,但它并不是自动的,就像您问的那样:https://www.npmjs.com/ package / css-byebye
优化可以合并/简化规则的样式表。

在这种情况下,我建议使用两种工具来做这种事情:


CSSO:http://css.github.io/csso/

clean-css:https://www.npmjs.com/package/clean-css


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

我将它们用作grunt构建过程的一部分。因此,这并不是像您所要求的那样真正的视觉化事物,但是它们可以实现您想要的优化。 .bem.info / tools / optimizers / csso /)

结构优化:


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


评论


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

– liori
15年2月17日在19:49

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

– Kev
2015年2月17日在20:16