Systematically resolve conflicting styles in css

Question

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.

Answer 1

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

Answer 2

Have you tried this Firefox extension? https://addons.mozilla.org/en-US/firefox/addon/5392 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.

Answer 3

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.