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

Question

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

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

我不希望那个跨度*类.我通过在bootstrap自定义页面中自定义它来尝试它.

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

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

Answer 1

与咕噜挣扎的一个小时后,我决定尝试uncss本身,它是简单得多.如果您只有几页要做,或者不介意手动执行,我建议您这样做.

uncss页面有完整的说明,但总结一下:

1. 安装了node.js.
2. npm install -g uncss
3. 从uncss页面复制样本文件,并将其命名为扩展名为.js的任何内容.我把它命名为uncss.js.
4. 用您的html文件替换files数组.(看起来像var files = ['my', 'array', 'of', 'HTML', 'files'])
5. 用样式表替换stylesheets数组.(看起来像stylesheets : ['lib/bootstrap/dist/css/bootstrap.css', 'src/public/css/main.css']).如果需要,同样更改"csspath"的值.
6. 运行node uncss.js(或任何你称为你的uncss文件).它将优化的CSS直接吐出到命令行,因此将其保存到类似的文件中node uncss.js > mynewcss.css.

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

Answer 2

我有完全一样的问题!

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

因此,59%规则已被删除,css文件大小从121KB减少到59KB,并且在Google PageSpeed上测试我的网站时增加了大约5分

访问我的项目:css-optimizer

Answer 3

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

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

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

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