删除跨多个文件的重复 CSS 声明
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9656509/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove duplicate CSS declarations across multiple files
提问by kotekzot
I'm looking to remove duplicate CSS declarations from a number of files to make implementing changes easier. Is there a tool that can help me do that?
我希望从多个文件中删除重复的 CSS 声明，以便更轻松地实施更改。有没有工具可以帮助我做到这一点？
Right now I'm faced with something like this:
现在我面临这样的事情：
styles.css
#content {
width:800px;
height:1000px;
background: green;
}
styles.game.css
#content {
width:800px;
height:1000px;
background: blue;
}
And I want this:
我想要这个：
styles.css
#content {
width:800px;
height:1000px;
background: green;
}
styles.game.css
#content {
background: blue;
}
The total number of lines across all files is well over 10k, so techniques that rely on manual editing aren't an option.
所有文件的总行数远远超过 10k，因此依赖手动编辑的技术不是一种选择。
回答by Zach Moazeni
回答by Praveen Vijayan
helped me to clean up selectors - CSS usage - Firebug extension to view which CSS rules are actually used.
帮助我清理选择器 - CSS 使用 - Firebug 扩展以查看实际使用了哪些 CSS 规则。
回答by AEQ
I made a nodejs tool to help with this, it currently handles single files but lemme know if it helps or of any improvements, feel free to fork it and take it to another level too :)
我制作了一个 nodejs 工具来帮助解决这个问题，它目前处理单个文件，但让我知道它是否有帮助或有任何改进，请随意将其分叉并将其提升到另一个级别:)
https://npmjs.org/package/css-purge
https://npmjs.org/package/css-purge
回答by Fabio Nolasco
This system claim to do that: http://sourceforge.net/projects/cssmerge/?source=dlp
该系统声称这样做：http: //sourceforge.net/projects/cssmerge/?source=dlp
But I couldn't make it work, though.
但我无法让它发挥作用。
So here it goes some tools to compare the CSS files. It is not as fast as an automatic solution, but would make it faster than going by visual comparison alone.
所以这里有一些工具来比较 CSS 文件。它不像自动解决方案那么快，但会使其比仅通过视觉比较更快。
http://www.araxis.com/merge_mac/index.html
http://www.araxis.com/merge_mac/index.html
回答by harshakasireddy
You can use W3C CSS validator to remove the duplicates of the properties. Upload the css file by clicking By file upload and click on check, then go to warnings part where you can see the duplicate properties repeated. Then you can remove your duplications by going to specific line in the file.
您可以使用 W3C CSS 验证器删除重复的属性。通过单击按文件上传并单击检查来上传 css 文件，然后转到警告部分，您可以在其中看到重复的属性。然后，您可以通过转到文件中的特定行来删除重复项。
URL :http://jigsaw.w3.org/css-validator/#validate_by_upload
网址：http://jigsaw.w3.org/css-validator/#validate_by_upload
回答by Connor
Probably the closest thing to what you're looking for is a css preprocessor and css imports. I like LESS: http://lesscss.org/
可能与您正在寻找的最接近的东西是 css 预处理器和 css 导入。我喜欢 LESS：http: //lesscss.org/
I would do something like
我会做类似的事情
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;
}
EDIT: I sort of overlooked that you don't even need LESS at all, or the height and width in styles.game.css
编辑：我有点忽略了你甚至不需要 LESS，或者 style.game.css 中的高度和宽度
It would just look like
它看起来就像
styles.game.css
@import url("style.css");
#content {
background: blue;
}
