【发布时间】：2011-02-16 19:46:24
【问题描述】：
我的 Web 项目中有一些来自不同来源的样式表。我想协调它们。 我需要的一些样式来自一个，一些来自另一个。 有没有一种工具或方法可以系统地解决风格冲突？ 我试过IE8开发者工具，是的，可以查看每个元素级别的冲突。 但是我有很多元素，所以如果我一个元素一个元素地做，我认为这需要太长时间。 理论上可能有一个工具可以在设计时显示两个 css 文件的冲突？！？我想这会为我节省很多时间。
【问题讨论】：
【发布时间】：2011-02-16 19:46:24
【问题描述】：
CSS 没有冲突，它有级联。这个想法是，您可以定义适用于相同元素的多个规则，并且您放置样式的顺序反映了重要性 - 即，如果它出现在最后，它将覆盖以前的规则，其中存在您描述为冲突的东西。
你应该……
1) 决定哪个样式表最重要并放在第二位
或
2) 重新编写样式以避免混乱
或
3) 将重要规则标记为 !IMPORTANT
【讨论】：
-
因为您认为人们无法信任了解此功能？你想保密吗？虽然不鼓励使用
!IMPORTANT，因为它与级联规则的概念相冲突，但我们正在讨论尝试将来自多个来源的许多规则组合在一起的特定上下文，!IMPORTANT绝对是您在这种情况下需要考虑的工具。 -
使用 !important 通常只会在地毯下隐藏一团糟，可以这么说，你最终会得到更多的混乱，以后不再适合在地毯下，也就是问为什么 css 没有！非常重要...
您是否尝试过这个 Firefox 扩展程序 Dust-Me 选择器 (http://www.brothercake.com/dustmeselectors/)？它使删除冗余样式变得更加容易。
否则，我可能会将所有样式弹出到一个文件中，尝试将相似的规则组合在一起，然后使用 Dust-Me 删除未使用的。
【讨论】：
-
除尘帮了我很多忙。还有 IE8 开发工具。
-
该链接不再有效。您所指的附加组件的名称是什么？
如果您在 FireFox 中查看该网站并使用 Firebug 扩展程序，那么您可以查看渲染页面中的每个元素，并通过使用 firefox 中的“CSS”选项卡，您可以看到样式规则的级联被应用于该元素，以及每个来自哪个 CSS 源文件。它还会向您显示正在覆盖的规则。
这有助于确定每个特定规则的来源以及被覆盖的内容。
您仍然需要“合理化”您的样式表，并且可能有其他工具可以帮助您。
【讨论】：
我整理了一个快速脚本，有助于检测来自多个来源的 CSS 规则的重叠：https://github.com/mgsloan/css-overlap
正如所写，它仅适用于 URL 引用的样式表，但可以很容易地适应处理内联样式表。它使用两个正则表达式将样式表分成两组，然后扫描页面中的每个 DOM 节点，寻找两组样式表中的某些规则匹配的情况。
【讨论】：