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用法 - 用于查看实际使用的CSS规则的Firebug扩展。

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

该系统声称这样做： http://sourceforge.net/projects/cssmerge/?source=dlp

但是我无法让它发挥作用。

所以这里有一些工具来比较CSS文件。它没有自动解决方案那么快，但会比单独进行视觉比较更快。

http://www.diffchecker.com/

http://www.araxis.com/merge_mac/index.html

http://csscompare.codeplex.com/

Answer 5

您可以使用W3C CSS验证程序删除属性的重复项。通过单击按文件上载并单击检查来上载css文件，然后转到警告部分，您可以在其中看到重复的重复属性。然后，您可以通过转到文件中的特定行来删除重复项。

网址：http：//jigsaw.w3.org/css-validator/#validate_by_upload

Answer 6

可能与您正在寻找的最接近的是css预处理器和css导入。我喜欢LESS：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，或者style.game.css中的高度和宽度

它看起来像

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

#content {
background: blue;
}

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

6 个答案: