css - 系统地解决 css 中的冲突样式

Question

我的 Web 项目中有一些来自不同来源的样式表。我想协调它们。我需要的一些样式来自一个，一些来自另一个。有没有一种工具或方法可以系统地解决风格冲突？我试过IE8开发者工具，是的，可以查看每个元素级别的冲突。但是我有很多元素，所以如果我一个元素一个元素地做，我认为这需要太长时间。理论上可能有一个工具可以在设计时显示两个 css 文件的冲突？！？我想这会为我节省很多时间。

Answer 1

你试过这个 Firefox 扩展，Dust-Me 选择器（http://www.brothercake.com/dustmeselectors/）吗？它使删除冗余样式变得更加容易。

否则，我可能会将所有样式放入一个文件中，尝试将类似的规则组合在一起，然后使用 Dust-Me 删除未使用的样式。

Answer 2

CSS 没有冲突，它有级联。这个想法是，您可以定义适用于相同元素的多个规则，并且您放置样式的顺序反映了重要性 - 即，如果它出现在最后，它将覆盖以前的规则，其中存在您描述为冲突的东西。

你应该要么...

1) 决定哪个样式表最重要并放在第二位

或者

2）重写你的风格以避免混乱

或者

3) 将重要规则标记为 !IMPORTANT

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.

Answer 4

我整理了一个快速脚本，有助于检测来自多个来源的 CSS 规则的重叠：https ://github.com/mgsloan/css-overlap

正如所写，它仅适用于 URL 引用的样式表，但可以很容易地适应处理内联样式表。它使用两个正则表达式将样式表分成两组，然后扫描页面中的每个 DOM 节点，寻找两组样式表中的某些规则匹配的情况。