Question

假设您有一个动态生成的网站，过去和现在都有太多人使用，现在您拥有一组包含超过20,000行CSS的共享样式表。它根本没有组织，有一些类和基于id的选择器，但也有太多基于标签的选择器。然后说你有100个模板使用这些样式，通过一些控制器。

是否有一个工具，可能像Firebug一样工作，您可以指向一个URL，它将确定该页面的所有适用的CSS选择器并将它们转储到文件中？基本上是一种逐页拆分共享样式表的方法。

Answer 1

通过仅在页面上获取已使用的css并允许您将其简单地复制到剪贴板并将其粘贴到Chrome浏览器CSS Used

漂亮图片示例

Answer 2

之前我使用过Dust-Me选择器，这是一个Firefox插件。它非常易于使用和通用，因为它在使用CSS值的许多页面上维护了一个组合列表。

缺点是我无法将其自动化为蜘蛛整个网站，因此我最终只在我网站的关键页面/模板上使用它。尽管如此，它仍然非常有用。

http://www.sitepoint.com/dustmeselectors/

https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/

与上面的评论相反，Dust-Me Selectors 2.2与Firefox 3.6兼容（我刚刚安装了它）。

Answer 3

这看起来很有希望：

Unused-CSS.com - 为您的网站提供服务并通过电子邮件向您发送结果的服务
CSS Usage - Firebug插件

Answer 4

（不适用于Firefox，但也许这有助于某人）

如果您正在使用Chrome，则可以使用此扩展程序：

CSS删除并合并（https://chrome.google.com/webstore/detail/css-remove-and-combine/cdfmaaeapjmacolkojefhfollmphonoh）

允许您下载包含所有使用样式的组合css
在弹出窗口中显示未使用的样式
包括生成的样式

Answer 5

<强> SnappySnippet

有一个名为SnappySnippet的chrome的开源广告我发现它比其他只是扩展了Chrome中已有的开发人员工具要好得多。你甚至可以只提取页面的一部分将所有相关的CSS。看this stackoverflow post

Answer 6

uncss: Find Unused CSS - cli工具，使用phantomjs并在页面上执行JS，可用于URL
grunt-uncss - 仅适用于静态文件
（critical css - 为浏览器窗口中可见的元素提取CSS）

Answer 7

此Firefox扩展程序可能会解决您的问题Dust-Me Selectors。还有一个名为CssCleaner或CssHelper的小型桌面应用程序，但我无法找到它的链接...（只是在我的机器上很久以前下载了类似的任务）

Answer 8

如果您正在处理单个页面，您还可以使用我的书签快速抓取网页实际使用的CSS：

转到here（如果此链接中断，您也可以从pastebin获取）。
将“下载书签”下的大按钮拖到书签工具栏上。

就是这样。现在，无论何时想要封装静态页面（即，为了使其可移植，或者如果您打算从其自己的iframe中提供它），只需单击书签，它将在叠加层中显示当前页面上所有使用的CSS。单击阴影以关闭叠加层。

此解决方案的一个好处是它支持响应式页面，因为还提取了媒体查询。作为奖励，媒体查询按视口大小特异性排序（例如，@media (max-width: 767px)将在 @media (max-width: 1023px)之后>。

如果有需要，我还可以添加一个选项来缩小生成的CSS。由于我仅根据自己的需要使用此书签，因此尚未经过广泛测试，因此请在评论中报告任何问题。

注意：要使此书签与Chrome中的本地文件一起使用，请将--allow-file-access-from-files添加到Chrome快捷方式目标。例如：

"C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

Answer 9

这是我使用JavaScript的解决方案：

var css = [];
for (var i=0; i<document.styleSheets.length; i++)
{
    var sheet = document.styleSheets[i];
    var rules = ('cssRules' in sheet)? sheet.cssRules : sheet.rules;
    if (rules)
    {
        css.push('\n/* Stylesheet : '+(sheet.href||'[inline styles]')+' */');
        for (var j=0; j<rules.length; j++)
        {
            var rule = rules[j];
            if ('cssText' in rule)
                css.push(rule.cssText);
            else
                css.push(rule.selectorText+' {\n'+rule.style.cssText+'\n}\n');
        }
    }
}
var cssInline = css.join('\n')+'\n';

最后，cssInline是该页面所有电子表格及其内容的文本列表。

示例：

/* Stylesheet : http://example.com/cache/css/javascript.css */
.javascript .de1, .javascript .de2 { -webkit-user-select: text; padding: 0px 5px; vertical-align: top; color: rgb(0, 0, 0); border-left-width: 1px; border-left-style: solid; border-left-color: rgb(204, 204, 204); margin: 0px 0px 0px -7px; position: relative; background: rgb(255, 255, 255); }
.javascript { color: rgb(172, 172, 172); }
.javascript .imp { font-weight: bold; color: red; }

/* Stylesheet : http://example.com/i/main_master.css */
html { }
body { color: rgb(24, 24, 24); font-family: 'segoe ui', 'trebuchet MS', 'Lucida Sans Unicode', 'Lucida Sans', sans-serif; font-size: 1em; line-height: 1.5em; margin: 0px; padding: 0px; background: url(http://pastebin.com/i/bg.jpg); }
a { color: rgb(204, 0, 51); text-decoration: none; }
a:hover { color: rgb(153, 153, 153); text-decoration: none; }
.icon24 { height: 24px; vertical-align: middle; width: 24px; margin: 0px 4px 0px 10px; }
#header { border-radius: 0px 0px 6px 6px; color: rgb(255, 255, 255); background-color: rgb(2, 56, 89); }
#super_frame { min-width: 1100px; width: 1200px; margin: 0px auto; }
#monster_frame { -webkit-box-shadow: rgb(204, 204, 204) 0px 0px 10px 5px; box-shadow: rgb(204, 204, 204) 0px 0px 10px 5px; border-radius: 5px; border: 1px solid rgb(204, 204, 204); margin: 0px; background-color: rgb(255, 255, 255); }
#header a { color: rgb(255, 255, 255); }
#menu_2 { height: 290px; }

/* Stylesheet : [inline styles] */
.hidden { display: none; }

Answer 10

我遇到了Uncss-Online-非官方服务器，非常方便测试或一次性使用！我认为这是我遇到的最好的工具。

UnCSS是一个可从样式表中删除未使用的CSS的工具。它可以跨多个文件工作，并支持注入Javascript的CSS。可以通过以下方式使用：

将HTML和CSS复制并粘贴到提供的框中
点击按钮
等待魔术发生
未使用的CSS消失了，剩下的就用吧！

您可以检查他们的Github Page，以了解使用此工具的其他高级方式

Answer 11

尝试使用此工具，它只是一个简单的js脚本 https://github.com/shashwatsahai/CSSExtractor/ 该工具可帮助您从特定页面获取CSS，该页面列出了所有活动样式的来源，并将其保存到JSON中，其中来源为键，规则为值。它从href链接加载所有CSS，并告诉所有从中应用的样式。您可以使用任何名称将输出保存到JSON文件中。

Answer 12

嗯..我通过使用服务器端解析CSS文件来提取各种CSS选择器，然后在浏览器中将每个选项作为jQuery选择器运行，从而引发了一些蛮力。不是很优雅，但应该有效吗？

Answer 13

检查PurifyCSS，以及那些可以处理CLI或Gulp / Grunt / Webpack的人

您可以从单个页面或多个页面或整个项目中删除未使用的样式，即使这些类是通过javascript注入的。

如果你可以谷歌，那里有大量的资源，你可以从中了解PurifyCSS。

Answer 14

截至2020年9月，这个问题已有10年的历史了。所提供的大多数解决方案不再起作用或链接的项目消失了。

但是，由于Google现在将页面速度用作其优先级指标之一，因此该问题仍然非常相关。

在对列出的所有链接进行了大量研究之后，我发现了purgecss.com。这似乎是使用Angular，React，Vue等清理现代Web应用程序/ SPA中未使用的CSS的最佳选择。此外，还与PostCSS，Webpack，Grunt和Gulp建立了集成。

此外，UnCSS似乎仍然得到维护。它具有与PurgeCSS一样强大的功能，但没有集成到构建过程或单页javascript应用程序中。

Answer 15

您还可以使用http://getcssusedinapage.com来获取页面中使用的CSS。它是免费，快速的，并为您提供了许多详细信息以及最小化和优化的CSS代码，您只需将它们复制并粘贴到网站中即可

仅提取特定页面中使用的css

15 个答案: