css - 如何删除未使用的 CSS 规则

Question

关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。












我们不允许提出有关书籍、工具、软件库等建议的问题。您可以编辑问题，以便可以用事实和引用来回答它。


6年前关闭。







Improve this question

EDIT: While my specific issue is due / relating to the Twitter Bootstrap system, the solution I am looking for does not need to be Twitter Bootstrap specific, but more a solution for any CSS style sheets.

我开始为我正在从事的一个元素探索 Twitter Bootstrap 的世界。我正在使用 Bootstrap 3.3.6

问题 (为什么我有下面的问题)

基本的 Bootstrap CSS 文件是 6760 行，以及用于将我自己的自定义 CSS 添加到站点的附加文件。总的来说，这使得每个页面的站点加载了大约 8700 行 CSS(未缩小)。

但适用于网站的规则仅使用其中的约 700 行。那是 大量 每个页面的开销，甚至将 CSS 缩小到 .min.css格式这仍然是一个巨大的百分比开销。

我正在寻找一种在不从 CSS 文件中删除任何使用的规则的情况下减少这种开销的方法。

我试过的 (以及为什么它不起作用或不切实际)

我以前成功地使用了 Firefox Dust-Me CSS 细化器可以识别页面中所有未使用的 CSS 规则，甚至整个站点。

这就是我想要的， 但是 它有两个严重的缺点:

它只保留页面上使用的设备/媒体的 CSS 规则(例如，它告诉我 IE10 viewport bug workaround CSS 文件中的所有规则都没有使用，因为我使用的是 Firefox 浏览器而不是IE10)。它也没有考虑媒体查询特定的规则。

使用 Dust-Me 的另一个主要缺点(具体来说，但我发现的其他类似程序也有类似的不足)是，虽然它会告诉我哪些规则没有使用，但它不能让我复制/粘贴源文件中使用的 CSS。

我还研究了一些其他 CSS 备用规则删除器和 Google Chrome Developers Audit这很有用，但做同样的事情，以文本格式列出未使用的规则，这只是我正在寻找的工作的一半。

问题 (为什么我需要你的帮助来解决这个问题)

所以我处于一个位置，我有一个 Google Chrome 审核，它告诉我 bootstrap.css 的 88%和 bootstrap-theme.css 的 65%未使用。这些未使用的元素以文本格式列出，有数百个。目前我只能看到我需要对每一个进行查找/替换，从源中删除它们[规则标识符]，然后再通过 CSS 文件并删除所有不再有任何规则的命令。

所以我问这个:

What is the best method or approach for me to read the CSS from a whole website, and return only all the CSS rules that are referenced in the site, so rules that are not referenced are not returned to the operator?

然后我可以从这个函数中获取输出，然后将其缩小并节省 Bootstrap 的大量 CSS 开销。

或 ，有没有我没有考虑过的完全不同的方法？

补充:
我已阅读 How to remove unused styles from twitter bootstrap?这与我要问的类似，但这里的正确答案引用了某种 Bootstrap 选择，我可以在其中选择从 Bootstrap 中采用的样式。这是 2013 年的日期，似乎是指 Bootstrap 版本 2。

另外，我不使用 Grunt并且不熟悉 Less .对不起 :-/

Answer 1

您可以自定义在 http://getbootstrap.com/customize/ 编译的组件.
这样，您将拥有一个较小的输出文件，但将满足所有依赖项。

要获得更好的控制，您可以使用源 .less文件以仅编译所需的组件。