分析和比较两个CSS样式表的工具

有谁知道一个好的工具,可以parsing和比较两个CSS样式表,以find哪些select器有不同的风格?

我不能使用标准的diff-like工具,因为这两个CSS文件的布局非常不同。 我需要一个可以parsing和理解CSS的工具,然后在两个样式表中查找实际上具有不同样式的select器。

我发现的唯一工具是来自Alan Hart的CSS比较器 ,但是当存在适用于多个select器的样式时,它会感到困惑。

以下是我最终做的,以防其他人有同样的问题:

  1. 我用CSSTidy来“规范化”我想比较的两个样式表。 在我的情况下规范化意味着分裂多个select器和sortingselect器和属性。 在线版本的CSSTidy可以在这里find 。
  2. 在此之后,我使用Alan Hart的CSS Comparer工具来找出两个样式表之间的差异。

这做了我的具体要求的工作。

我尝试使用CSS比较 。 它似乎正是你正在寻找的东西。 但是,似乎有多个select器的问题。 好的部分是它是命令行驱动的,所以如果你有很多的CSS文件,你可以设置一个自动化的过程,或者你可以链接CSS文件,将它们与一个巨大的SASS文件进行比较。 这个工具将显示所有的差异,包括类的值的差异。

如果一个工具向你展示了哪些样式覆盖了同样的样式表中的其他样式,那真的不错。 许多旧网站都有这样的包袱,过滤出来会很好。 当然,一个自动化的工具可能会导致问题,但至less是像Firebug那样生成报告的东西,除了每个select器和整个CSS文件集合,都是非常棒的。 可悲的CSS比较是不是这样一个工具,我不知道一个:(

我将在一个选项卡中使用一个样式表加载网页,在另一个选项卡中使用另一个样式表。 然后使用检查员或萤火虫检查相关节点的风格。

很明显,这是非常手动的,但是你问的是一个破坏过程的这样一个绷带,你可能找不到太多的帮助。

如果你有一些编程经验,你可以自己编写一个parsing器,这个parsing器非常简单,可以报告每个定义的类和它的风格。 然而,这可能是更多的工作,那么这是值得的。

手动执行一次,然后通过转移到SASS( http://sass-lang.com/ )并在您的网站上放置更好的组织来解决问题。

如果您使用的是Mac,则可以在Text Wrangler(app-free)中打开这两个css文件,并使用其内置function“比较两个前端文档”进行比较。

如果您是Windows用户,请在记事本++和工具菜单下打开这两个文件,select比较。

Interesting Posts