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

Yes, I would use a diff tool (DiffMerge is free) and see what is similar between the two css files.

Answer 2

DiffMerge (or any diffing tool for that matter) is good if your files have a similar layout but if they are very different (like I expect your CSS might be) the might easily show the entire file as being one big difference and so prove to be no use at all.

What I would do in this situation is install the dom inspector in FireFox, and the inspect this add on.

Then, include your 2nd style sheet and view the page.

Right click on the bocked element and "Inspect this". Then change the view mode of the dom inspector to CSS. It will show you the current cascade of styles applied to the current element and also give reference to which file and which line.

This way you can figure out where you have conflicting styles.

This is admittedly no automatic process but unless your styles are 99% identical then diffing isn't going to work.

Answer 3

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 4

All good answers.... I am loathed to pick a correct one this time.

Just to add to the mix... A colleague recommended the Web Developer Toolbar for FF.

I used CSS\View Style Info and then clicked the stuff that was strange... I quickly found a rule from the new stylesheet which was radically altering the height of it.

Answer 5

For developers using Visual Studio 2008 who may be reading this:

When you select an HTML element in the WYSIWYG designer, you can use the CSS Properties window to see all CSS rules and their corresponding settings, including the cascading settings inherited from the various CSS rules.

By clicking on a rule in the property pane, you can identify the source of each CSS setting. This makes it easier to figure out why a page or element looks a particular way.

Answer 6

I wrote a basic tool to compare two css files by element. It allows you to move elements between files and delete elements and single settings. Email me if you want it. ([email protected]).

It's "not ready for prime time" yet, but it works.

Answer 7

I've used this php class before - works well.

http://www.phpclasses.org/package/4638-PHP-Compare-two-CSS-style-definitions.html