如何清理无效的 CSS 代码

项目开发过程中，前端设计改来改去，这时往往会先把新的效果做出来，等项目做完，就会有一些遗弃的 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