twitter-bootstrap 如何从 twitter bootstrap 中删除未使用的样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14135905/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove unused styles from twitter bootstrap?
提问by Giri
My bootstrap stylesheet size is around 120kb.
我的引导样式表大小约为 120kb。
But I'm only using 25% of that stylesheet code.
但我只使用了 25% 的样式表代码。
I don't want that span* class. I tried it by customizing it in bootstrap customize page.
我不想要那个 span* 类。我通过在 bootstrap custom page中自定义它来尝试它。
I unchecked grid system, But I still see span1 - span12 classin forms, tables and responsive layouts.
我取消了网格系统，但我仍然span1 - span12 class在表单、表格和响应式布局中看到。
Can someone help me to remove those codes?
有人可以帮我删除这些代码吗？
采纳答案by Voodoo
Are you more concerned about the impact of the file size on the loading time for your users? Or want to make it easier for you to read/understand the CSS if it's shorter?
您是否更关心文件大小对用户加载时间的影响？或者想让你更容易阅读/理解 CSS 如果它更短？
Either way, I suggest you don't spend too much time worrying about removing every single extra CSS style. Uncheck the elements of Bootstrap that you don't plan on using and download the customized version. For the live/production version of your site, use a minimized version of the CSS which will further reduce the file size.
无论哪种方式，我建议您不要花太多时间担心删除每一个额外的 CSS 样式。取消选中您不打算使用的 Bootstrap 元素并下载自定义版本。对于您网站的实时/生产版本，请使用 CSS 的最小化版本，这将进一步减小文件大小。
If you just want to keep the code more simple for your use, that's definitely understandable but the Bootstrap team has done a great job of organizing it. Spend a little time with it.
如果您只是想让代码更简单以供您使用，这绝对可以理解，但 Bootstrap 团队在组织它方面做得很好。花一点时间与它。
Consider that trying to completely remove all span*references will remove functionality that you might use like controlling the width of form fields. These can be very useful, even if you're not using the grid.
考虑到尝试完全删除所有span*引用将删除您可能使用的功能，例如控制表单字段的宽度。即使您不使用网格，这些也非常有用。
回答by felwithe
After an hour of struggling with grunt, I decided to try uncssby itself, and it was much simpler. If you only have a few pages to do, or don't mind doing it manually, I'd recommend doing that.
在与 grunt 挣扎了一个小时后，我决定单独尝试uncss，它简单得多。如果您只有几页要做，或者不介意手动进行，我建议您这样做。
The uncss page has full instructions, but to summarize:
uncss 页面有完整的说明，但总结一下：
- Have node.js installed.
npm install -g uncss- Copy the sample file from the uncsspage and name it anything with a .js extension. I named it uncss.js.
- Replace the files array with your html files. (It looks like
var files = ['my', 'array', 'of', 'HTML', 'files']) - Replace the stylesheets array with your stylesheets. (It looks like
stylesheets : ['lib/bootstrap/dist/css/bootstrap.css', 'src/public/css/main.css']). Likewise change the value of "csspath" if you need to. - Run
node uncss.js(or whatever you called your uncss file). It spits out the optimized CSS straight to the command line, so save it to a file with something likenode uncss.js > mynewcss.css.
- 安装了 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.
There are a bunch of options to tailor the behavior. I ignored all of them and it worked fine, but they're there if you want them. The page I tested it on went from 138kb to 9kb.
有很多选项可以定制行为。我忽略了所有这些并且效果很好，但是如果您需要它们，它们就在那里。我测试它的页面从 138kb 到 9kb。
回答by Tho
I got exactly the same problem!
我遇到了完全相同的问题！
I wrote a tool to remove all un-used css style rules in bootstrap.css
我写了一个工具来删除 bootstrap.css 中所有未使用的 css 样式规则
As a result, 59% rulehas been removed, css file size reduced from 121KB to 59KBand increased about 5 scorewhen testing with Google PageSpeed
结果，59% 规则被删除，css 文件大小从121KB减少到 59KB并在使用Google PageSpeed测试时增加了约 5 分
The source code is here css-optimizer
源代码在这里css-optimizer
回答by Thijs Kramer
I assume that twitter bootstrap heavily relies on those span*classes. When I only toggle the "table" checkbox under "Base CSS", I still get span*classes in the compiled css, because they are rendered anyway. Take a look at https://github.com/twitter/bootstrap/blob/master/less/tables.less:
我认为 twitter bootstrap 严重依赖于这些span*类。当我只切换“Base CSS”下的“table”复选框时，我仍然span*在编译的 css 中得到类，因为它们无论如何都会被渲染。看看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); }
}
So I'm afraid you should cannot remove them with the customizer, only manually.
所以恐怕你不能用定制器删除它们，只能手动删除。
回答by Nigel B. Peck
I have a template using Bootstrap 2, which is the required system for Joomla. I just did this manually and found it easy to do. The Bootstrap CSS file is very nicely constructed and well ordered in sections. I removed the entire contents of the file to bootstrap_unused.cssand then also copied that to bootstrap_original.css.
我有一个使用 Bootstrap 2 的模板，这是 Joomla 所需的系统。我只是手动完成了这件事，发现这很容易做到。Bootstrap CSS 文件的结构非常好，并且按部分顺序排列。我删除了文件的全部内容，bootstrap_unused.css然后也将其复制到bootstrap_original.css.
I then cut out from bootstrap_unused.csswhat I knew was in use, being careful to preserve the order, and pasted it back in. Most of it worked first time and reduced the file size from 144KB to 14KB. I then needed to add some bits and pieces back in for forms etc. and ended up at 30KB.
然后我从bootstrap_unused.css我知道正在使用的内容中剪掉，小心地保留顺序，然后将其粘贴回。其中大部分都是第一次工作，并将文件大小从 144KB 减少到 14KB。然后我需要为表单等添加一些零碎的东西，最终达到 30KB。
If I need any other features in the future, I can pull them back in from bootstrap_unused.cssand I always have bootstrap_original.cssfor reference.
如果我将来需要任何其他功能，我可以将它们拉回来bootstrap_unused.css，我总是有bootstrap_original.css参考。
