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