Systematically resolve conflicting styles in css

CSS doesn't have conflicts, it has cascades. The idea is that you CAN define multiple rules that apply to the same elements and the order in which you place the styles reflects an importance - i.e. if it appears last, it will override previous rules where there is something you describe as a conflict.

You should either...

1) Decide which style sheet is the most important and put it second

OR

2) Re-write your styles to avoid the mess

OR

3) Mark important rules as !IMPORTANT

Have you tried this Firefox extension, Dust-Me Selectors (http://www.brothercake.com/dustmeselectors/)? It makes removing redundant styles much easier.

Otherwise, I'd probably pop all the styles into one file, trying to group together similar rules, and then use Dust-Me to remove the unused ones.

If you view the site in FireFox, and use the Firebug extension, you can then look at each element in your rendered page, and by using the "CSS" tab in firefox, you can see the cascade of style rules that are being applied to that element, and from what CSS source file each came from. It will show you what rules are being overridden, too.

This is helpful in determining just where each particular rule is coming from, and what is being overridden.

You still have the task of "rationalizing" your style sheets, and there may be other tools that can help in that.