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 refiner,它可以识别页面中甚至整个站点上所有未使用的CSS规则.

这是我想要的东西,但它有两个严重的缺点：

>它只保留页面上用于所用设备/媒体的CSS规则(例如,它告诉我IE10 viewport bug workaround CSS文件中的所有规则都没有使用,因为我使用的是Firefox浏览器而不是IE10 ).它也没有考虑媒体查询特定规则.
>使用Dust-Me的另一个主要缺点(特别是,但我发现其他类似的程序有类似的缺点)是,虽然它会告诉我哪些规则没有使用,但它没有给我一个复制/的能力从源文件中粘贴使用过的CSS.

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

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

所以我有一个谷歌Chrome审核,告诉我88％的bootstrap.css和65％的bootstrap-theme.css未使用.这些未使用的元素以文本格式列出,并且有数百个.目前我只能看到我需要在每一个上找到/替换它们,从源中删除它们[规则标识符]然后再通过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?

然后我可以从这个函数中获取输出,然后将其缩小并保存引导程序的大量CSS开销.

或者,有没有完全不同的做法,我没有考虑过？

额外：
我已经阅读了How to remove unused styles from twitter bootstrap?,这与我的要求相似,但这里的正确答案引用了某种Bootstrap选择,我可以从Bootstrap中选择哪种样式.这是日期2013年,似乎是指Bootstrap版本2.

另外,我不使用Grunt而且不熟悉Less.对不起： – /