如何从 twitter bootstrap 中删除未使用的样式？答案

【问题标题】：How to remove unused styles from twitter bootstrap?如何从 twitter bootstrap 中删除未使用的样式？
【发布时间】：2012-12-17 15:18:43
【问题描述】：

我的引导样式表大小约为 120kb。

但我只使用了 25% 的样式表代码。

我不想要 span* 类。我通过在引导程序customize page 中自定义它来尝试它。

我未选中网格系统，但我仍然在表单、表格和响应式布局中看到 span1 - span12 class。

有人可以帮我删除这些代码吗？

【问题讨论】：

我不是css专家，但我觉得像blueprint这样的框架可以让你的生活更轻松。它们只是结构，轻量级，与引导程序不同，您可以使它们看起来不同。但这是我的看法..
只需使用 mixins。不是 CSS 类
如果您已经在使用完善的 CDN 版本的引导程序，那么您不应该关心这些事情，但如果它实际上是您构建代码的一部分，那么您可以在他们的网站上对其进行自定义或构建您自己使用 LESS 并禁用您不需要的组件 - github.com/twbs/bootstrap

标签： css twitter-bootstrap responsive-design

【解决方案1】：

在与 grunt 斗争了一个小时后，我决定自己尝试uncss，它更简单。如果您只有几页要做，或者不介意手动操作，我建议您这样做。

uncss 页面有完整的说明，但总结一下：

已安装 node.js。
npm install -g uncss
从uncss 页面复制示例文件并将其命名为任何带有.js 扩展名的名称。我将其命名为 uncss.js。
用您的 html 文件替换 files 数组。（看起来像var files = ['my', 'array', 'of', 'HTML', 'files']）
用您的样式表替换样式表数组。（看起来像stylesheets : ['lib/bootstrap/dist/css/bootstrap.css', 'src/public/css/main.css']）。如果需要，同样更改“csspath”的值。
运行node uncss.js（或任何你调用你的uncss文件）。它将优化后的 CSS 直接输出到命令行，因此将其保存到类似 node uncss.js > mynewcss.css 的文件中。

有很多选项可以定制行为。我忽略了所有这些，它工作得很好，但如果你想要它们，它们就在那里。我测试它的页面从 138kb 变成了 9kb。

【讨论】：

这应该是答案，因为它直接解决了这个问题。

【解决方案2】：

我遇到了完全相同的问题！

我写了一个工具来删除 bootstrap.css 中所有未使用的 css 样式规则

因此，59% 规则被移除，css文件大小从121KB减少到59KB，测试时增加了大约5分 Google PageSpeed

源码在这里css-optimizer

【讨论】：

【解决方案3】：

您是否更关心文件大小对用户加载时间的影响？或者想让您更轻松地阅读/理解 CSS（如果它更短的话）？

无论哪种方式，我建议您不要花太多时间担心删除每一个额外的 CSS 样式。取消选中您不打算使用的 Bootstrap 元素并下载自定义版本。对于您网站的实时/生产版本，请使用 CSS 的最小化版本，这将进一步减小文件大小。

如果您只是想让代码更简单以供您使用，那绝对可以理解，但 Bootstrap 团队在组织它方面做得很好。花一点时间来处理它。

请考虑尝试完全删除所有 span* 引用将删除您可能使用的功能，例如控制表单字段的宽度。即使您不使用网格，这些也会非常有用。

【讨论】：

“不要那样做”不是答案，除非这样做有一些错误。通过优化 CSS，您可以轻松地在 CSS 中每页节省 125kb。我们可能生活在一个快速数据的时代，但 100kb 仍然是 100kb，尤其是当您的主机像许多人一样限制每秒数据传输时。这就是你的网站在一群人同时点击它时锁定与否的区别。

【解决方案4】：

我假设 twitter 引导程序严重依赖于那些 span* 类。当我只切换“Base CSS”下的“table”复选框时，我仍然在编译的 css 中得到 span* 类，因为它们无论如何都会被渲染。看看https://github.com/twitter/bootstrap/blob/master/less/tables.less：

// R.185: Change the column widths to account for td/th padding
.table td,
.table th {
  &.span1     { .tableColumns(1); }
  &.span2     { .tableColumns(2); }
  &.span3     { .tableColumns(3); }
  &.span4     { .tableColumns(4); }
  &.span5     { .tableColumns(5); }
  &.span6     { .tableColumns(6); }
  &.span7     { .tableColumns(7); }
  &.span8     { .tableColumns(8); }
  &.span9     { .tableColumns(9); }
  &.span10    { .tableColumns(10); }
  &.span11    { .tableColumns(11); }
  &.span12    { .tableColumns(12); }
}

所以恐怕你不能用定制器删除它们，只能手动删除。

【讨论】：

【解决方案5】：

我有一个使用 Bootstrap 2 的模板，这是 Joomla 所需的系统。我只是手动完成了这项工作，发现它很容易做到。 Bootstrap CSS 文件的结构非常好，并且在部分中排序良好。我将文件的全部内容删除到bootstrap_unused.css，然后也将其复制到bootstrap_original.css。

然后，我从bootstrap_unused.css 中删除了我所知道的正在使用的内容，小心保留了顺序，然后将其粘贴回去。其中大部分都是第一次工作，并将文件大小从 144KB 减少到 14KB。然后我需要为表单等添加一些点点滴滴，最终达到 30KB。

如果我以后需要任何其他功能，我可以从bootstrap_unused.css 中拉回来，我总是有bootstrap_original.css 供参考。

【讨论】：