如何改进我的CSS + HTML工作流程？

Question

我是LAMP开发人员，但我也是CSS / HTML的高级版。问题是我在该领域的工作流程确实遭受了冗余和繁琐的任务。肯定有更好的办法。我目前从UI设计开始，然后：

• 我写HTML
• 打开Firefox'Web Developer'附加组件的Live CSS编辑器和
• Firebug CSS + HTML检查器。
• 我在Firebug中调整样式，然后将它们转换为Web Developer的编辑器（单调乏味！）
• 然后每隔几次迭代我就会将整个CSS从Web Developer复制到我的文本编辑器中，保存并重新加载Firefox网页。

这个过程在理论上是可以的，它适用于我，但它需要如此多的窗口切换，以及将样式信息从一个应用程序复制到另一个应用程序（Firebug到Web Developer）。我可以在Web Developer中手动输入所有内容（我有时会这样做）但是Firebug使您能够使用向上/向下箭头来调整像素设置并自动完成CSS密钥名称。似乎理想的工具将是两种工具的混合，但我没有遇到过类似的东西。

我正在寻找建议。

Answer 1

试用JetBrains WebStorm及其适用于Firefox和Chrome的CSS XFire插件。一旦你尝试了，你将永远不会回去。

Answer 2

我个人使用FlawLESS。我把我的文本编辑器（应该非常好地支持CSS）和我的浏览器并排放置，并立即看到更改。

Answer 3

我认为您不需要同时使用Firebug和Web Developer控件来编辑live css。您可以从firebug执行这两项操作，只需单击css选项卡，然后单击编辑。通常情况下，我甚至懒得更改firebug编辑窗格的CSS。我使用样式窗格，每次进行调整时，我都很高兴我把它放在真正的css文件中。

Answer 4

你是否考虑过使用像git这样的东西？最近在 A List Apart上有一个非常好的初学者教程：Getting Started with Git 。

使用版本控制，您可以在本地工作，只需点击几下即可将最新的稳定代码推送到实际网站。