这是一个创建于 3267 天前的主题，其中的信息可能已经有所发展或是发生改变。
项目开发过程中，前端设计改来改去，这时往往会先把新的效果做出来，等项目做完，就会有一些遗弃的 CSS 代码，比如有些 CSS 类在 DOM 改动后用不到了。那么，有哪些可用的方法呢？
对比清除无用 CSS 的解决方法：
- 在线网站分析，优点是输个地址就行，有直观的图表展示，缺点是要获取详细数据可能需要付费，不支持本地使用。
- gulp npm 工具，优点是可以融入工作流，缺点是清除无用 CSS 只是一次性任务，配置有点麻烦，而且哪些代码要剔除恐怕必须要人工判断。
- unusedCSS - Chrome 网上应用店 推荐，支持本地服务上跑的页面，界面简陋但够用方便。
图文简单介绍下 unusedCSS 的使用：
如图，点
Set Domain，对当前网站分析。
随便点空白地方，等扩展界面关掉再次打开，界面显示扩展已开启，有三个按钮，点第二个查看分析结果。
结果页，主要是看后两项，未使用和重复项，结合这两项数据，逐条清理。
总结
清理无效 CSS ，需要花一点时间手动剔除（无法自动化），有些代码只在某种特殊状态下才用到（如 media query ），这些代码就要跳过了。清理过程中，要做好测试，防止误伤。
 |
1
zzuieliyaoli 2015-12-12 12:07:26 +08:00
chrome 带有查看无效 CSS 代码的工具。。。。
  |
|
2
zzuieliyaoli 2015-12-12 12:10:24 +08:00  1
F12 => 顶部工具条选择“ Audits ” => 底部“ Run ”按钮 => “ Web Page Performance ” => “ Remove unused CSS rules ”
|
 |
3
sparanoid MOD |
 |
4
jonechenug 2015-12-12 12:40:10 +08:00 via Android
怎么知道无效，不同浏览器对应不同的 CSS 的时候(譬如有些属性不支持 ie ，有些仅支持 ie)，你怎么破？
|
 |
5
viko16 2015-12-12 12:55:22 +08:00
然而还要考虑后续添加进来的 DOM 是否用上，也是累啊
|
 |
6
Wangxf 2015-12-12 13:24:07 +08:00
这个东西 jb 家的 ide 自带这个功能，没用的 css 都显示暗色
|
 |
7
coolzjy 2015-12-12 13:44:41 +08:00
@jonechenug 而且 CSS 经常是全站共享的，一个页面怎么能分析出来
|
 |
8
ys0290 2015-12-12 14:10:20 +08:00 via iPhone
css 文件大到影响网站载入了吗？
|
 |
9
cyio OP @zzuieliyaoli 经你提醒才知道 audits 的存在（这个单词没学过）
刚用了下，请教两个问题： 1. 它是否可以用来检测重复的 CSS 类？ 2. 它能给出多个页面（比如 webapp ）的检测结果吗，还是只能一个页面一个页面来？ |
|
10
cyio OP |
 |
11
cheneydog 2015-12-12 15:24:02 +08:00
@zzuieliyaoli
然后呢？怎么能去除无效的规则保存，怎么匹配多个页面。 |
 |
12
hiluluke 2015-12-12 15:54:14 +08:00
chrome 开发 devstool 里面的 audits ，那用这么麻烦。
|
 |
13
nickleefly 2015-12-13 08:29:07 +08:00 via Android
|
 |
14
huage 2016-12-22 17:12:30 +08:00
@zzuieliyaoli remove 只是一个提示多少百分比的无效代码吧，但是不会给一个结果
|
Select Language