Remove duplicate CSS declarations across multiple files

Question

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.

Answer 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.

Answer 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/

Answer 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

Answer 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/

Answer 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

Answer 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;
}