解析和比较两个 CSS 样式表的工具
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7930064/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Tool to parse and compare two CSS stylesheets
提问by Grodriguez
Does anyone know of a good tool that can parse and compare two CSS stylesheets in order to find which selectors have different styles?
有谁知道可以解析和比较两个 CSS 样式表以找出哪些选择器具有不同样式的好工具？
I cannot use a standard diff-like tool because the two CSS files have very different layout. I need a tool that can parse and understand the CSS, then look for selectors that actually have different styles in the two stylesheets.
我不能使用标准的类似 diff 的工具，因为这两个 CSS 文件的布局非常不同。我需要一个可以解析和理解 CSS 的工具，然后在两个样式表中查找实际上具有不同样式的选择器。
The only tool I've found is the CSS Comparer from Alan Hart, however it gets confused when there are styles that apply to multiple selectors.
我发现的唯一工具是Alan Hart的CSS Comparer，但是当有适用于多个选择器的样式时，它会感到困惑。
回答by Grodriguez
Here's what I ended up doing, in case someone else has the same problem:
这是我最终做的，以防其他人遇到同样的问题：
- I used CSSTidyto "normalize" the two stylesheets I wanted to compare. Normalization in my case meant splitting multiple selectors and sorting selectors and properties. An online version of CSSTidy is available here.
- After this, I used the CSS Comparer tool from Alan Hartto find out differences between the two stylesheets.
- 我使用CSSTidy来“规范化”我想要比较的两个样式表。在我的情况下，规范化意味着拆分多个选择器并对选择器和属性进行排序。此处提供了 CSSTidy 的在线版本。
- 在此之后，我使用了Alan Hart的CSS 比较器工具来找出两个样式表之间的差异。
This did the job for my specific requirements.
这满足了我的特定要求。
回答by cjbarth
I tried using CSS Compare. It seems to do exactly what you are looking for. However, it seems to have some issues with multiple selectors. The nice part is that it is command-line driven, so you can set up an automated process if you have lots of CSS files, or you can chain the CSS files together to compare them to one giant resultant SASS file. This tool will show you all the differences, including differences in the values of the classes.
我尝试使用CSS 比较。它似乎完全符合您的要求。但是，多个选择器似乎存在一些问题。好的部分是它是命令行驱动的，因此如果您有大量 CSS 文件，您可以设置一个自动化流程，或者您可以将 CSS 文件链接在一起，将它们与一个巨大的结果 SASS 文件进行比较。此工具将向您显示所有差异，包括类值的差异。
What would be really nice if a tool showed you which styles overrode other styles in the same stylesheet. Many old sites have lots of baggage in this way and filtering it out would be great. Of course, an automated tool might cause issues, but at least something that generates a report like Firebug does, except for every selector and for the entire collection of CSS files, would be great. Sadly CSS Compareis not such a tool, and I don't know of one:(
如果一个工具向您展示了哪些样式覆盖了同一样式表中的其他样式，那该多好。许多旧网站以这种方式有很多包袱，过滤掉它会很棒。当然，自动化工具可能会导致问题，但至少可以像 Firebug 那样生成报告，除了每个选择器和整个 CSS 文件集合，还是不错的。遗憾的是CSS Compare不是这样的工具，我不知道有一个:(
