有没有 css 的分析优化工具，删除没用的 css

写网页的时候用的bootstrap,可是写到后面发现用到的bootsrap的样式并不多，可是抛弃boostrap的话，更改起来又有点麻烦，现在有没有css的分析优化工具，可以找到网页中用到了哪些样式，然后把没有用到的自动删除掉。

---

使用firefox的插件：css usage

可以列出所有引入的内联，外链的css文件

红色的就是未使用的类了，不过有些样式隐藏的比较深，进入页面检测时，可以把页面所有的表单，经过效果都点一遍，让隐藏的样式显示出来

---

Chrome 自带的 Inspect Element 中的 Audits 就可以查询页面当中的无用 css

---

要善用chrome啊~
在console 有个功能叫audits，可以分析页面的情况，哪些css没使用，覆盖率达到多少，那些css、js建议压缩的都会告诉你

我姓雷，谢谢

---

http://cssshrink.com/ 这款工具可以合并压缩css 并且可以会检测重复的css自动合并 比如.nav{left:5px;}.box{left:5px;} 它就会进行合并 .nav,.box{left:5px;}

---

之前回答过一个类似的问题，http://.com/q/1010000000692695/a-1020000000692903

有一个uncss项目，题主可以试用一下。

• uncss
• grunt-uncss
• gulp-uncss

这个项目的思路大致如下：

1. 使用PhantomJS加载页面并执行页面中的JS代码
2. 从页面中解析出外链的CSS文件
3. 合并这些CSS文件，并用css-parse进行解析
4. 使用document.querySelector来过滤出那些未在页面中找到对应元素的选择器
5. 剩下的规则就是我们需要的了

但是这样存在一个问题，如果一个用户点击了某个地方弹出了一个对话框，但如果页面加载完的时候不存在这个对话框，就有可能出现样式被误删的情况。