样式注入是赢家的利器

我所说的“样式注入”是指能够在编写样式后立即看到样式变化，而无需手动刷新浏览器窗口。这不是一个全新的概念，我现在之所以提到它，是因为它太棒了，如果你还没有把它纳入工作流程，你应该考虑更新你的工作流程以包含它。

过去

很长一段时间以来，Dreamweaver 都能够显示正在构建内容的实时预览。CSS Edit 也有一样的功能。现在，这项功能已内置到 Espresso 中，我快速浏览了一下，发现它仍然提供预览，但不是分屏可编辑的预览。

但是，它们使用了一些内置的 WebKit 功能来实现，运行的是谁也不知道确切版本的 WebKit。我喜欢在人们使用的浏览器中进行测试。此外，当您进行 CSS 预处理 时，这些方法将无法正常工作。

如果您使用这些编辑器或以这种方式工作，我无意冒犯，只是不适合我。

新风格

我知道的第一个这样的工具是 LiveReload。通过浏览器扩展，当您保存文件时，更改会自动注入。

“LiveReload”这个名字暗示它会为您重新加载页面，当您更改 HTML 或 JavaScript 时确实如此。即使这样也很方便，因为它可以避免您切换应用程序和手动刷新页面。但是，当您更改 CSS（无论是预处理还是未处理）时，样式会“注入”，这意味着它们会生效而无需刷新页面。

我喜欢 CodeKit，它也已经有一段时间了。CodeKit 只能以这种方式与 Safari 和 Chrome 协同工作，但它会自动执行而无需浏览器扩展。

如果您愿意在页面上添加一个脚本标签，LiveReload 可以在 Chrome、Safari、Firefox、Mobile Safari 和 Opera（经过一番调整）中使用。不使用脚本标签，您可以在 Safari、Chrome 和 Firefox 中使用它。

Mixture 也将提供实时更新，但我还没有研究它们是如何实现的。 Yeoman 有刷新功能，但没有注入功能。它是开源的，所以也许有人可以添加它 =)。

为什么样式注入很酷？

因为页面没有刷新，您可以对页面进行样式设置而不会影响其状态。假设您有一个单击后会弹出的对话框，您想对该对话框进行样式设置。当使用一个进行样式注入的应用程序时，您可以将该对话框保留在浏览器中打开，并编写更改它的 CSS 代码，并观察这些更改立即生效，而无需刷新浏览器并丢失该状态。并非所有状态都与 URL 更改相关联。对话框就是一个常见的例子。

以下是一个例子

状态越复杂，它就越有用。想象一下，您试图对一个自定义下拉菜单的悬停效果进行样式设置，该下拉菜单出现在默认情况下关闭的面板中。要为每个微小的样式更改复制该状态，需要很多步骤。

屏幕设置

我喜欢使用 Divvy 快速将我的代码编辑器放到右边，浏览器放到左边，立即开始工作。我已经将 Divvy 设置为只有左右两个区域，没有复杂的网格。

记录

CodePen 也提供边输入边更新的功能，并有一个 实时视图 模式。我认为这非常酷，非常有用，但 CodePen 还没有真正适合您实际的 Web 开发工作流程。