Question

我有一个网站的样式表变得势不可挡，并且在某些页面上不使用完整的50％到90％左右。我不想拥有23个单独的阻止CSS表单，而是想知道我想要在目标页面上使用哪些内容，并将这些内容导出到一个页面中。

我已经看过几个推荐的问题＆＃34; Dust me selectors＆＃34;或类似的添加将告诉哪些选择器是和不使用;但那不是我想要的。我需要能够将该特定页面的所有工作表中的所有使用的样式导出到一个可用于替换其他23个页面的新工作表中。该解决方案应该能够支持响应式网站（媒体呼叫）。我定位的网站页面是：http://tripinary.com。

我发现：https://unused-css.com但这是付费服务，我需要免费;

我遇到的下一个最接近的事情是http://www.csstrashman.com/，但这并没有看样式表。事实上，它完全忽略了它们，最终我在网站的响应能力方面遇到了麻烦。很多时候，这个网站都崩溃了。

如果有人之前必须这样做并且可以推荐方向，我不介意程序化解决方案。

Answer 1

（删除了我对RwwL答案的评论，使其成为彻底的答案）

UnCSS ，无论是node.js还是grunt或gulp任务，都能够通过Media Queries数组中的一系列页面列出使用过的CSS规则。

解开：https://github.com/giakki/uncss
grunt-uncss：https://github.com/addyosmani/grunt-uncss
gulp-uncss：https://github.com/ben-eb/gulp-uncss

<强>缩：

您可以将files作为参数传递给3个插件中的任何一个，例如：

var files   = ['my', 'array', 'of', 'HTML', 'files'],
    options = { /* (…) */ };

uncss(files, options, function (error, output) {
    console.log(output);
});

避免：

urls（数组）：
要使用Phantom加载的URL数组（如果有的话，已经传递的文件之上）注意：此功能已弃用，您可以直接将URL作为参数传递。

考虑媒体查询和响应：

media（Array）：
默认情况下，UnCSS仅处理具有媒体查询“all”，“screen”和没有媒体查询的样式表。在此指定要包含的其他内容。

您可以添加样式表，忽略其中一些，添加内联CSS以及许多其他选项，例如htmlroot

剩余问题：

1 / 条件类如果您将它们用于IE9-。它们显然不会在WebKit PhantomJS环境中匹配！

HTML:
<!--[if IE 9]><html class="ie9 lte-ie9" lang="en"><![endif]--> <!-- teh conditional comment/class -->

CSS:
.ie9 .some-class { property: value; ] /* Only matched in IE9, not WebKit PhantomJS */

是否应该手动或脚本添加到测试环境中的html元素？（它如何呈现并不重要）
在unss中有选项吗？
只要你没有:not(.ie9)（怪异）的样式，它应该没问题。

编辑：您可以将ignore option与pattern一起使用以强制解除“提供不应由UnCSS删除的选择器列表”。不会被测试。

2 / 将检测分辨率（视口宽度）的脚本，并通过删除/添加内容或在容器上添加类来调整内容。他们将以桌面分辨率在PhantomJS中执行，因此我们无法完成他们的工作，所以你需要修改对PhantomJS的调用或类似的东西......或者深入研究3个项目的选项或GitHub问题（我没有'吨）

我听说过的其他工具，未经测试或勉强或无法测试，不知道MQ部分：

在grunt-uncss自述文件中， Coverage 部分
ucss（这里已经有一个问题，无法使其发挥作用）
Helium
CSSESS
mincss

Addy Osmani有无数次100多张幻灯片的演示文稿，展示了像这样的令人敬畏的工具：https://speakerdeck.com/addyosmani/automating-front-end-workflow（你会后悔更多的日子只有24小时，而不是48等待72 ^^）

Answer 2

CSS Usage plugin for Firebug怎么样？

步骤：

访问Firefox中的页面
点击＆＃34; CSS使用＆＃34; Firebug中的标签
单击“扫描”按钮
单击粗体文件名
将CSS选择器页面保存到磁盘

Here are some screen shots and walk through。不确定媒体查询或它是否会在您的网站上运行，并且它可能不会保留-webkit等，但也许它会让您在那里找到一部分。

Answer 3

Opera Software在Github上发布了一个CSS爬虫，声称它可以找到未使用和重复的选择器。如果您对命令行工具感到满意，它可能会成功。 https://github.com/operasoftware/ucss

Answer 4

您可以通过执行检查元素（F12）来检查Google Chrome。未使用的CSS在标签上有Line。

Answer 5

如果你愿意，你可以尝试构建一个在（非生产）服务器上运行的脚本，该服务器遍历每个css规则，从样式表中删除它，使用像phantomjs这样的东西加载页面，并检查是否从上次加载页面时发生的任何变化。如果是这样，那么将css规则放回去，如果没有，则将其保留，然后转到下一个规则。运行需要一段时间，但它会起作用。您还必须设置一个不使用缓存的服务器实例来运行它。

Answer 6

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

如何仅在给定网页上提取已使用的CSS并将其组合到单独的样式表中？

6 个答案: