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

Question

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

Answer 1

你试过这个Firefox扩展吗？ https://addons.mozilla.org/en-US/firefox/addon/5392它使删除冗余样式变得更加容易。

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

Answer 2

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

你应该......

1）确定哪个样式表最重要，然后将其放在第二位

OR

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

OR

3）将重要规则标记为！重要

Answer 3

如果您在FireFox中查看该站点并使用Firebug扩展，则可以查看渲染页面中的每个元素，并使用firefox中的“CSS”选项卡，您可以看到级联的样式规则应用于该元素，以及每个来自哪个CSS源文件。它会告诉你什么规则被覆盖。

这有助于确定每个特定规则的来源以及被覆盖的内容。

您仍然需要“合理化”您的样式表，并且可能还有其他工具可以为您提供帮助。

Answer 4

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

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