Remove duplicate CSS declarations across multiple files

问题

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?

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.

回答1:

I wrote a tool specifically for this purpose called csscss. As a bonus it also integrates with Sass and LESS. Give it a shot and let me know if you have an issues in github.

回答2:

helped me to clean up selectors - CSS usage - Firebug extension to view which CSS rules are actually used.

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

回答3:

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 :)

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

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

回答4:

This system claim to do that: 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.

http://www.diffchecker.com/

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

http://csscompare.codeplex.com/

回答5:

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.

URL :http://jigsaw.w3.org/css-validator/#validate_by_upload

回答6:

Probably the closest thing to what you're looking for is a css preprocessor and css imports. I like 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

It would just look like

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

#content {
background: blue;
}

来源：https://stackoverflow.com/questions/9656509/remove-duplicate-css-declarations-across-multiple-files

标签

css

duplicates

duplicate-removal