删除未被使用的CSS定义

[gangsta]

stackoverflow和gist了一圈,发现类似的扩展和脚本很多
但对于大多数工具,(比如:Chrome开发者工具 > Audits > Remove unused CSS rules),只能做到识别(detect / identify)出未被使用的选择器定义,而并没有真正的remove.
(既然找到了,并且是多余的,肯定是要删掉啦)

如果文件很大的话,找出这些多余的定义本身就很麻烦,删起来就更费事了.


求这样一个成熟的工具或者脚本:
可以CSS文件中找出声明且被使用的样式定义,剔除掉未被使用的

谢各位前端大神!

[turing]

这个问题挺复杂的，涉及的不是在某一个页面上找出没有被使用到的样式，而是在所有项目中引用了某一个样式表的页面上找出没有被一个页面所使用到的样式的问题。因为样式表不会像js那样如此模块化的管理，所以我们需要先找出一个项目中的所有样式和所有页面的对应和交叉关系。当涉及到前端并不是直接维护css，而用less或者sass维护的话，定位到编译这个css的源文件的相对位置又是一件麻烦事。

所以一直处在想做但是觉得成本太高没做的情况下。

[lingyired]

太复杂了
特别是多人开发的时候

[lingyired]

而且这样的工具也很难工作，有些元素是要通过js 生成的，就难检测到

[gangsta]

@turing 谢回复.
没那么复杂的需求,目前我只需要单个页面而已.
实际上Chrome的工具也是只针对当前页面而非项目级.

既然已经找出来了,剩下的事应该就是文本差异的比较了
搜索了下Unix下好像有diff和类似的工具,不过本人小白
https://gist.github.com/tingletech/3977356

[turing]

不复杂的场景，试试:

https://github.com/operasoftware/ucss

[turing]

要抽象成树的，不能简单通过diff来删除，设想一个场景，当你的页面没有用到 .abc 这个 class的时候，css中匹配abc这个class的子代和孙代样式都应该被删除。将css抽象成树，可以看看我之前的同事柳钦写的 peaches:

https://github.com/sliuqin/peaches