删除多个文件中的重复CSS声明

Question

我希望从许多文件中删除重复的CSS声明,以便更轻松地实现更改.有没有一种工具可以帮助我做到这一点？

现在我面临着这样的事情:

styles.css
#content {
width:800px;
height:1000px;
background: green;
}

styles.game.css
#content {
width:800px;
height:1000px;
background: blue;
}

我想要这个:

styles.css
#content {
width:800px;
height:1000px;
background: green;
}

styles.game.css
#content {
background: blue;
}

所有文件的总行数超过10k,因此不依赖于手动编辑的技术.

Answer 1

我专门为此编写了一个名为csscss的工具.作为奖励,它还与Sass和LESS集成.试一试,如果你在github上遇到问题,请告诉我.

Answer 2

帮助我清理选择器 - CSS使用 - Firebug扩展来查看实际使用的CSS规则.

https://addons.mozilla.org/en-US/firefox/addon/css-usage/

Answer 3

我创建了一个nodejs工具来帮助解决这个问题,它目前只处理单个文件,但是知道它是否有帮助或任何改进,请随意分叉并将其带到另一个级别:)

https://npmjs.org/package/css-purge

https://github.com/rbtech/css-purge

Answer 4

可能最接近您正在寻找的东西是 css 预处理器和 css 导入。我喜欢更少： http: //lesscss.org/

我会做类似的事情

styles.css
@site-width: 800px;
@site-height: 1000px;

#content {
width: @site-width;
height: @site-height;
background: green;
}


styles.game.css
@import url("style.css");

#content {
width: @site-width;
height: @site-height;
background: blue;
}

编辑：我有点忽略了你根本不需要 LESS，或者 styles.game.css 中的高度和宽度

它看起来就像

styles.game.css
@import url("style.css");

#content {
background: blue;
}