CSS Diff

简介:

当您在 DevTools 检查器窗口中进行 CSS 更改时，这将跟踪您的更改并为您提供格式良好的差异

当您从事一个项目，将其他人完成的设计转换为 HTML + CSS 时，当您与他们一起来回尝试调整内容时，通常会感到沮丧。通常，您最终会收到标记的屏幕截图，要求移动、更改内容等。前端工程师和设计师最终都会对所有这些来回感到沮丧。

一旦设计师了解了 Chrome DevTools 检查器，他们可以选择元素并调整 CSS 值，直到他们满意为止，这个过程就可以得到极大的改进，因为他们可以提供有关他们想要更改的值的具体反馈。

CSS Diff 是一个扩展，它允许设计人员简单地向工程师发送其更改的通用“diff”输出，以便可以实施这些更改，从而简化了这种反馈周期。通常，您最终会使用 less、scss 等来管理您的样式，这样您就可以将差异直接应用于源，但是摸索差异并手动进行更新比尝试基于以下内容进行更新要好得多标记屏幕截图。

这不适用于缩小的 CSS，因为它只是保留打开 DevTools 时的 CSS 副本，然后显示与之对比的实时差异。这通常不是问题，因为让设计人员访问源代码未缩小的开发环境应该是微不足道的。