What tool to use to compare and reduce css style sheets

Question

I have a page (page1.html) which references a css file (style1.css)

All is good.

I need Page1.html to additionally reference Style2.css However when I add the reference, some stuff on Page1.html screws up.

How can I determine what it is about Style2.css that is causing this problem? Some diff Tool? Some Process?

Answer 1

Firebug shows you which rules are being overridden, and from which stylesheet the rules come from.

Just select the problem elements and it will show you the rules applied to it. You can then toggle them on/off the see the effect.

Answer 2

Directly compare two CSS stylesheets to instantly see the differences between them: http://www.alanhart.co.uk/archives/2010/12/15/compare-css-stylesheet-tool/

Very handy when you making changes to a site's CSS and you cant remember what you changed (as long as you keep a backup of the original to compare against)