css - 使用什么工具来比较和减少 css 样式表

Question

我有一个引用 css 文件 (style1.css) 的页面 (page1.html)

一切都很好。

我需要 Page1.html 来额外引用 Style2.css 但是当我添加引用时，Page1.html 上的一些东西搞砸了。

如何确定导致此问题的 Style2.css 是什么？一些差异工具？一些过程？

score 12 · Accepted Answer

Firebug向您显示哪些规则被覆盖，以及规则来自哪个样式表。

只需选择问题元素，它就会向您显示应用于它的规则。然后，您可以打开/关闭它们以查看效果。

score 9 · Accepted Answer

当您更改网站的 CSS 并且您不记得更改了什么时非常方便（只要您保留原始的备份以进行比较）

score 2 · Accepted Answer

是的，我会使用 diff 工具（DiffMerge是免费的）并查看两个 css 文件之间的相似之处。

score 2 · Accepted Answer

如果您的文件具有相似的布局，但如果它们非常不同（就像我期望您的 CSS 可能那样），则 DiffMerge（或任何与此相关的差异工具）很好，可能很容易将整个文件显示为一个很大的差异，因此证明一点用都没有。

在这种情况下我会做的是在 FireFox 中安装 dom 检查器，然后检查这个插件。

然后，包含您的第二个样式表并查看该页面。

右键单击被阻止的元素并“检查此”。然后将 dom 检查器的视图模式更改为 CSS。它将向您显示应用于当前元素的当前样式级联，并提供对哪个文件和哪一行的引用。

这样你就可以找出你在哪里有冲突的风格。

诚然，这不是自动过程，但除非您的样式 99% 相同，否则差异将不起作用。

score 1 · Accepted Answer

我以前使用过这个 php 类 - 效果很好。

score 0 · Accepted Answer

所有好的答案......这次我不愿意选择一个正确的答案。

只是为了添加...一位同事推荐了 FF 的 Web 开发人员工具栏。

我使用了 CSS\View Style Info，然后单击了奇怪的东西……我很快从新样式表中找到了一条规则，该规则从根本上改变了它的高度。

score 0 · Accepted Answer

对于可能正在阅读本文的使用Visual Studio 2008的开发人员：

在 WYSIWYG 设计器中选择 HTML 元素时，可以使用 CSS 属性窗口查看所有 CSS 规则及其相应设置，包括从各种 CSS 规则继承的级联设置。

通过单击属性窗格中的规则，您可以识别每个 CSS 设置的来源。这使得更容易弄清楚为什么页面或元素看起来具有特定的方式。

score 0 · Accepted Answer

0

diffchecker（在线）工具。非常有用和快速。http://www.diffchecker.com/

于 2011-08-16T06:29:22.013 回答

8 回答 8