Comparing and rationalizing CSS - not file or diff based

Question

I'm in the process of taking a couple of separate asp.net applications, and combining them.

One problem is rationalizing the CSS between the two app - app1 has two css files, while app2 has about 8 of them. Much of the CSS between the two apps is the same, but there are some differences. I'm looking for a tool to compare all the elements of each app, and show what's missing, what's different, etc. Ideally the output would be 3 files: Common, app1 and app2, but I won't be that fussy if it can just show me the differences between the two apps.

Does such a tool exist?

Answer 1

Normally I'd recommend diff. Since you explicitly write that you are looking for something "not diff based", maybe you could describe why diff does not help you.

Then others might be able to propose something different.

Answer 2

I don't know of a stand-alone tool tailored for this specific purpose. There's a PHP class called "CSS Comparer", but I have no idea how easy it is to use. The screenshot on that page looks promising though.

Personally, I would probably just concatenate all the files together, so that you have one file for each app, and then run a diff on them. To make it even easier, you could run both files through something like CSSTidy or do some imaginative file processing with search/replace and sorting. That could get all the declarations in the same order in both files, so the diff would be clearer.

Answer 3

Combine all of these files into a single file and give it a run through a CSS optimizer or compressor. An optimizer should see all of your duplicate selectors and weed them out.

I'd recommend YUI's compressor, but there are plenty of web-based compressors/optimizers available, too. Here's one and another. YMMV with them, but a good Google search can turn up a bunch more.