如何通过删除不匹配和/或不必要的 CSS 选择器来优化样式表

发布于 2024-09-30 01:39:35 字数 260 浏览 7 评论 0原文

我继承了一个包含数千个选择器的庞大样式表,并且我确信其中很多都是不必要的,并且实际上从未与网站上的元素匹配。为了优化,我想删除那些孤立的选择器/规则。

是否有任何工具可以让我将 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

倾听心声的旋律 2024-10-07 01:39:35

有一个 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.

戏蝶舞 2024-10-07 01:39:35

您可以尝试众多在线优化器之一,例如:

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.

孤寂小茶 2024-10-07 01:39:35

检查 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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文