Systematically resolve conflicting styles in css

css conflict resolve
Frank Michael Kraft picture Frank Michael Kraft · May 7, 2010 · Viewed 26.7k times · Source

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

David Yell picture David Yell · May 7, 2010

Have you tried this Firefox extension? Dust Me Selector 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.

Related questions

How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More
How do I vertically center text with CSS?

I have a <div> element which contains text and I want to align the contents of this <div> vertically center. Here is my <div> style: #box { height: 170px; width: 270px; background: #000; font-size: 48px; color: #…

Read More
How to align a <div> to the middle (horizontally/width) of the page

I have a div tag with width set to 800 pixels. When the browser width is greater than 800 pixels, it shouldn't stretch the div, but it should bring it to the middle of the page.

Read More