如何清理无效的 CSS 代码

[cyio]

项目开发过程中，前端设计改来改去，这时往往会先把新的效果做出来，等项目做完，就会有一些遗弃的 CSS 代码，比如有些 CSS 类在 DOM 改动后用不到了。那么，有哪些可用的方法呢？

对比清除无用 CSS 的解决方法：

1. 在线网站分析，优点是输个地址就行，有直观的图表展示，缺点是要获取详细数据可能需要付费，不支持本地使用。
2. gulp npm 工具，优点是可以融入工作流，缺点是清除无用 CSS 只是一次性任务，配置有点麻烦，而且哪些代码要剔除恐怕必须要人工判断。
3. unusedCSS - Chrome 网上应用店 推荐，支持本地服务上跑的页面，界面简陋但够用方便。

图文简单介绍下 unusedCSS 的使用：

1. 如图，点Set Domain，对当前网站分析。

2. 随便点空白地方，等扩展界面关掉再次打开，界面显示扩展已开启，有三个按钮，点第二个查看分析结果。

3. 结果页，主要是看后两项，未使用和重复项，结合这两项数据，逐条清理。
   

总结

清理无效 CSS ，需要花一点时间手动剔除（无法自动化），有些代码只在某种特殊状态下才用到（如 media query ），这些代码就要跳过了。清理过程中，要做好测试，防止误伤。

附原文链接：如何清理无效的 CSS 代码 - Oaker's Blog

[zzuieliyaoli]

chrome 带有查看无效 CSS 代码的工具。。。。

[zzuieliyaoli]

F12 => 顶部工具条选择“ Audits ” => 底部“ Run ”按钮 => “ Web Page Performance ” => “ Remove unused CSS rules ”

[sparanoid]

可以用 uncss ：

https://github.com/giakki/uncss

[jonechenug]

怎么知道无效，不同浏览器对应不同的 CSS 的时候(譬如有些属性不支持 ie ，有些仅支持 ie)，你怎么破？

[viko16]

然而还要考虑后续添加进来的 DOM 是否用上，也是累啊

[Wangxf]

这个东西 jb 家的 ide 自带这个功能，没用的 css 都显示暗色

[coolzjy]

@jonechenug 而且 CSS 经常是全站共享的，一个页面怎么能分析出来

[ys0290]

css 文件大到影响网站载入了吗？

[cyio]

@zzuieliyaoli 经你提醒才知道 audits 的存在（这个单词没学过）

刚用了下，请教两个问题：
1. 它是否可以用来检测重复的 CSS 类？
2. 它能给出多个页面（比如 webapp ）的检测结果吗，还是只能一个页面一个页面来？

[cyio]

@jonechenug
@coolzjy

写 blog 的时候忘了，当时做的是微信端的 webapp 项目，要对所有页面交互操作一遍，再看 unusedCSS 的检测结果。

[cheneydog]

@zzuieliyaoli
然后呢？怎么能去除无效的规则保存，怎么匹配多个页面。

[hiluluke]

chrome 开发 devstool 里面的 audits ，那用这么麻烦。

[nickleefly]

看这里 http://addyosmani.com/blog/removing-unused-css/

[huage]

@zzuieliyaoli remove 只是一个提示多少百分比的无效代码吧，但是不会给一个结果