Question

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

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

我不想要那个跨度*类。我通过在bootstrap customize page中自定义它来尝试它。

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

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

Answer 1

经过一个小时的咕噜挣扎，我决定独自尝试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（或您称之为unss文件的任何内容）。它将优化的CSS直接吐出到命令行，因此将其保存到node uncss.js > mynewcss.css之类的文件中。

有许多选项可以定制行为。我忽略了所有这些并且它运行良好，但是如果你想要它们它们就在那里。我测试的页面从138kb到9kb。

Answer 2

您是否更关注文件大小对用户加载时间的影响？或者想让它更容易阅读/理解CSS，如果它更短？

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

如果您只是想让代码更简单易用，那肯定是可以理解的，但Bootstrap团队在组织它方面做得很好。花一点时间。

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

Answer 3

我有完全相同的问题！

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

因此， 59％规则已被删除，css文件大小从 121KB减少到59KB ，增加约5分我的网站Google PageSpeed

访问我的项目：css-optimizer

Answer 4

我认为twitter bootstrap很大程度上依赖于那些span*类。当我只切换＆＃34;表＆＃34; ＆＃34; Base CSS＆＃34;下的复选框，我仍然在编译的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); }
}

所以我担心你不能用定制器删除它们，只能手动删除它们。

Answer 5

我有一个使用Bootstrap 2的模板，这是Joomla所需的系统。我只是手动完成，发现很容易做到。 Bootstrap CSS文件构造得非常好，并且部分排序很好。我将文件的全部内容移至bootstrap_unused.css，然后将其复制到bootstrap_original.css。

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

如果我将来需要任何其他功能，我可以将其从bootstrap_unused.css拉回来，我总是bootstrap_original.css作为参考。

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

5 个答案: