如何通过删除不匹配和/或不必要的 CSS 选择器来优化样式表
我继承了一个包含数千个选择器的庞大样式表,并且我确信其中很多都是不必要的,并且实际上从未与网站上的元素匹配。为了优化,我想删除那些孤立的选择器/规则。
是否有任何工具可以让我将 CSS 与整个网站进行比较,以确定哪些选择器是必需的,哪些不需要?
该站点有 AJAX 组件,因此编写一个 curl/wget 脚本来遍历该站点,然后循环遍历每个选择器并 grep 进行匹配也不是特别可行(尽管这会很有趣......)
欢迎所有建议。
谢谢, 京东
I have inherited a massive stylesheet with many thousand selectors and I'm certain that a good number of them are unnecessary and never actually match elements on the site. In the interests of optimizing, I'd like to remove those orphaned selectors/rules.
Are there any tools that would allow me to compare the CSS against the entirety of the site to identify which selectors are required and which are not?
The site has AJAX components, so writing a curl/wget script to traverse the site and then loop through each selector and grep for a match isn't particularly feasible either (even though that would be kinda fun...)
All suggestions welcomed.
Thanks,
JD
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
有一个 Firefox 插件,名为“Dust-Me Selectors”。
https://addons.mozilla.org/en-US/firefox/addon/ 5392 章
第 遇到选择器时可以将其从列表中划掉。”
这是一个相当手动的过程,但可能正是您正在寻找的。
There is a Firefox plugin called "Dust-Me Selectors".
https://addons.mozilla.org/en-US/firefox/addon/5392/
"It extracts all the selectors from all the stylesheets on the page you're viewing, then analyzes that page to see which of those selectors are not used. The data is then stored so that when testing subsequent pages, selectors can be crossed off the list as they're encountered."
It's a fairly manual process but could be what you're looking for.
您可以尝试众多在线优化器之一,例如:
http://www.cleancss.com/
Robson 压缩器显然在组合和删除冗余选择器方面做得最好。
http://iceyboard.no-ip.org/projects/css_compressor
一些在线的优化器能够删除未使用的选择器。
You can try one of the many online optimizers, like this one:
http://www.cleancss.com/
The Robson Compressor apparently does the best job of combining and removing redundant selectors.
http://iceyboard.no-ip.org/projects/css_compressor
Several of the online optimizers have the ability to remove unused selectors.
检查 CSS 覆盖率(Firebug 的扩展)http ://perishablepress.com/press/2010/06/21/how-to-micro-optimize-your-css/
在我看来比dust-me selectcor更好
check CSS Coverage (an extension for Firebug) http://perishablepress.com/press/2010/06/21/how-to-micro-optimize-your-css/
In my opinion better than dust-me selectcor