Remove redundant CSS rules
- by ken
I have several CSS files all being used in a large application; most are legacy, with one "main" css file that is the most current. This setup came about after a rebranding, and instead of redoing all of the CSS, we simply added a new CSS file that would override the rules from the legacy files.
So now, I'd like to distill all of this CSS (1000's of lines) into 1 file. NOTE: I don't want to simply combine the files (as in copy/pasting them all into 1 file); I need an application to semi-intelligently look at the rules, reduce them down to only the effective rules (after inheritance), but I can't find anything like that.
Example; given:
/* legacy.css */ .foo { color: red; margin: 5px; }
..and:
/* current.css */ .foo { margin: 10px; }
I need a tool to output:
/* result.css */ .foo { color: red; margin: 10px; }
Does such an application exist?