我有一个巨大的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
#2 楼
您也可以查看Unused-CSS.com。此工具将浏览您的页面并构建优化的CSS文件,而无需使用未使用的选择器#3 楼
我一直很喜欢CSS用法。它是Firebug的插件,让您扫描页面并查看未应用哪些CSS规则。它甚至可以自动扫描并跨多个页面工作。#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
#5 楼
@John:非常棒的工具,感谢您的链接@liori:我也强烈建议您使用Firefox Web Developer插件,该插件可让您显示元素名称/属性,实时编辑CSS(doesn' t写入css文件),这样您就可以编辑和测试css更改,而不必花3秒钟的时间保存和上传css。 +加载更多功能。
还有一个非常不错的DOM检查器,它可以插入Firebug,它也可以插入并非常适合于整理Javascript。
#6 楼
实际上,新的Firefox开发人员版浏览器John比使用Firebug或Firefox实用程序更好。试试看,您一定不会失望的!https://www.mozilla.org/zh-CN/firefox/developer/?utm_medium=paidsearch&utm_source=google&utm_campaign=dev-sem-q1-2015
评论
您可能会缺少任何合适的工具作为机会:由于您了解自己的需求,因此您可能是创建此类工具的最佳人选。您可以检查现有工具的思想和技术代码,然后构建可以在规则级别而不是选择器级别工作的代码。您的名利双收! ...嗯,也许只是名望;)@布兰登:这个问题刚好打到“显着问题”标记……所以你可能是对的:-)