Systematically resolve conflicting styles in css

I have some stylesheets from different sources in my web project. I want to harmonize them. Some styles I need from the one, some from the other. Is there a tool or method how to systematically resolve style conflicts? I tried IE8 developer tool, and yes, it is possible to view conflicts at the level of each element. But I have many elemens, so if I do it element by element I think this takes too long. Theoretically there could be a tool that shows conflicts of two css files at design time?!? I think this would save me开发者_开发知识库 a lot of time.

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.

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

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.

I threw together a quick script that can be helpful for detecting overlap of CSS rules from multiple sources: https://github.com/mgsloan/css-overlap

As written it only works for stylesheets referenced by URL, but can very easily be adapted to handle inline stylesheets. It uses two regexes to split the stylesheets into two sets, and then scans every DOM node in your page looking for cases where some rules from both sets of stylesheets match.