对于没有很强 CSS 技能的工程师来说，如何让 CSS/HTML 原型设计更快？
我开发 Ruby on Rails 应用程序已经有一段时间了，并且经常发现开发生成 HTML 模板以及附带 CSS 的帮助。不过，我想自己尝试一下。
最初的实验让我感觉我的过程真的慢。我在 VIM 中编写所有 Rails 代码，加上运行测试套件的别名，对我来说速度相当快。然而，在浏览器/VIM 之间来回查看新的更改似乎很麻烦 - 我猜想找到一个带有嵌入式浏览器的编辑器来不断地看到新的更改是理想的选择（有什么建议吗？）
到目前为止，我已经尝试过使用蓝图，一开始看起来它会节省我大量的时间。但是，还有哪些其他工具可以帮助您尽快完成 PSD->HTML/CSS 转换？
I've been developing Ruby on Rails applications for some time, and have often found help to develop generate the templates of HTML with accompanying CSS. However, I'd like to make an attempt at doing this myself.
Initial experiments leave me feeling like my process is really slow. I'm writing all my Rails code in VIM, which, with accompanying aliases to run the test suite, is pretty fast for me. However, the back-and-forth between browser/VIM to see new changes seems cumbersome - I'm guessing finding an editor with an embedded browser that constantly sees new changes is ideal for this (any suggestions?)
So far I've experimented with Blueprint, which at the onset seems like it will save me a ton of time. However, what other tools have helped you do the PSD->HTML/CSS conversion as fast as you can?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
您是否尝试过使用 http://jsfiddle.net/ ？它改变了我的世界。
Have you tried using http://jsfiddle.net/ ? It has changed my world.
不幸的是，作为一名前端开发人员，这似乎很耗时。您将开发一些技巧和捷径等。我已经开始调整 960.gs 网格系统进行布局，因为它允许我更快地进行布局。事实上，我曾经这样做过 - 现在我确实有一个特定布局的模板，我只需复制和粘贴即可。我建议您花半天时间了解您可能经常使用的典型网络应用程序/网站的基本知识。
使用一些 CSS3 代替图像也有帮助，一开始也是如此。我会这样做，然后一旦你让它与“good浏览器”。
希望有帮助！如果您想要我拥有的任何资源或有任何具体问题，请随时给我发送电子邮件...[名字]@[全名].com。
康纳
As a front-end developer, unfortunately it can seem time-consuming. You'll develop some tricks and shortcuts and such. I've started adapting the 960.gs grid system for layouts, as it allows me to make layouts much quicker. Actually, I USED to do that - now I literally have a template for a specific layout built out that I just copy and paste. I recommend you spend half a day and get the barebones for a typical web app/site that you may use frequently.
Using some CSS3 instead of images helps, as well initially. I would do that, then fall back to support older browsers using modernizronce you've gotten it working with "good browsers".
Hope that helps! If you want any of the resources I have or have any specific questions, feel free to email me... [firstname] @ [wholename] .com.
Connor
CSS 很累人，我知道。但使用 vim 的力量，一切对我来说都顺利得多。
也许我的 snipmate css snippets 可以帮助你。我一直在不断改进这个，让事情变得更容易、更快。
示例：
希望这会有所帮助。干杯!
CSS is tiring afai-knew-it. But using the powers of vim, everything is sailing much better for me.
Maybe my snipmate css snippets can help you. I've been continually improving this one to make things much easier and faster.
Examples:
Hope this helps. Cheers!
如今，原型制作比过去快得多。仅使用 Twitter bootstrap，Foundation 5 就可以让人们更快地创建有效的 UI，从而减少工作量。
Nowadays the prototyping can be much faster than it done in past. Just using Twitter bootstrap, Foundation 5 make it pretty faster for people to struggle less to make effective UI.