如何爲沒有強大CSS技能的工程師提高CSS/HTML原型設計的速度？

Question

我一直在開發Ruby on Rails應用程序一段時間，並且經常發現幫助開發使用隨附的CSS生成HTML模板。不過，我想嘗試自己做這件事。

最初的實驗讓我感覺我的過程真的很慢慢。我在VIM中編寫了所有的Rails代碼，這些代碼隨附了用於運行測試套件的別名，對我來說非常快。然而，瀏覽器/ VIM之間來回看到新的變化看起來很麻煩 - 我猜想找到一個帶有嵌入式瀏覽器的編輯器，它經常看到新的變化，對於這種情況是非常理想的（有什麼建議嗎？）

到目前爲止我已經嘗試過Blueprint，它在一開始似乎會爲我節省很多時間。但是，還有哪些其他工具可以幫助您儘快完成PSD-> HTML/CSS轉換？

Answer 1

您是否嘗試過使用http://jsfiddle.net/？它改變了我的世界。

Answer 2

作爲一名前端開發人員，不幸的是它看起來很耗時。你會開發一些技巧和快捷方式等。我已經開始對960.gs網格系統進行佈局調整，因爲它可以讓佈局更快。實際上，我用這樣做 - 現在我實際上有一個特定的佈局模板，我只是複製和粘貼。我建議你花費半天的時間，併爲經常使用的典型網絡應用/網站準備好準備。

使用一些CSS3而不是圖像幫助，以及最初。我會這樣做，然後回到支持使用modernizr的舊版瀏覽器，一旦你使用「良好的瀏覽器」工作。

希望有幫助！如果您需要我擁有的任何資源或有任何具體問題，請隨時給我發電子郵件...... [名字] @ [全名] .com。

connor

Answer 3

CSS令人厭倦afai-know-it。但是使用vim的強大功能，一切都爲我帶來更好的航海體驗。

也許我的snipmate css snippets可以幫到你。我一直在不斷地改進這一點，讓事情變得更容易和更快。

例子：

b[press Tab key] /* means border */ 
/* will produce */ 
border: 1px solid #999; 

bra[press Tab key] /* means border-radius */ 
/* will produce */ 
-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; 

=ir /* means Image Replacement */ 
/* will let you choose from 6 IR methods */ 
/* Below is one method, namely Leahy/Langridge Method */ 
#image {height: 0 !important; overflow: hidden; padding-top: 0px; width: 0px; background: url() no-repeat} 

=reset /* means Reset.css */ 
/* will produce the latest reset.css (taken from http://html5boilerplate.com/) */ 

希望這有助於。乾杯!

Answer 4

現在的原型可以比以前做得快得多。只需使用Twitter引導程序，Foundation 5就可以讓人們更快地完成更有效的UI工作。