你曾經(jīng)考慮過想要加快 HTML 和 CSS 編碼速度嗎?不管你是否想過，都來看看這篇文章吧，你會(huì)從中學(xué)到很多東西。我們要討論的不是 CSS 網(wǎng)格框架，也不是 CSS Reset。在這篇文章中，我們關(guān)注的是不同尋常的編碼方式——CSS 編譯器以及 HTML 縮寫編碼技術(shù)。借助這些優(yōu)秀的工具和技術(shù)，能夠大大的減少開發(fā)時(shí)間，加快開發(fā)進(jìn)度。

HTML

加快HTML 編碼的方法有很多，這里我們要介紹的是 HTML 縮寫技術(shù)。取代傳統(tǒng)的編寫完整 HTML 標(biāo)簽，我們只需要編碼縮寫代碼就能擴(kuò)展到完整的HTML標(biāo)記，一個(gè)簡單的例子：#container將被轉(zhuǎn)換成<div id="container"></div>。實(shí)現(xiàn) HTML 縮寫技術(shù)，有兩種著名的解決方案——Zen Coding 和 HAML。

Zen Coding 是一個(gè)用于快速編寫 HTML，CSS，XML，XSL 或者其他結(jié)構(gòu)化格式語言編碼的插件，包括 Zen HTML 和 Zen CSS 兩部分。這個(gè)插件核心是一個(gè)強(qiáng)大的縮寫引擎，允許你擴(kuò)展表達(dá)式，類似于從CSS選擇器到 HTML 代碼。支持Aptana/Eclipse、TextMate、Coda、Notepad++、Espresso、Dreamweaver、UltraEdit、Visual Studio、NetBeans、EmEditor、Vim等所有常見的編碼工具。強(qiáng)烈推薦給編寫 HTML 和 CSS 代碼的朋友，讓你代碼飛起來!

Haml 的作者 Hampton Catlin 是這樣介紹 Haml 的：Haml 是對(duì)傳統(tǒng) XHTML 生成方式的一種反叛，它既不是純粹的代碼，也不是一種文本處理語言，它是與眾不同的，是一種在我看來最為自然的 XHTML 構(gòu)造方式。Haml 是 Rails 下的一種可選模板語言方案，使用 CSS 風(fēng)格的語法來描述 DIV 的 ID 和 Class，以更加優(yōu)雅簡潔的方式編寫 HTML 代碼。

這是我從 Haml 網(wǎng)站拿過來的一個(gè)示例，你將看到編寫 HTML 代碼是多么的迅速。

1. #profile  

2.   .left.column  
3.     #date= print_date 
4.     #address= current_user.address  
5.   .right.column  
6.     #email= current_user.email  
7.     #bio= current_user.bio 

Haml 模板引擎能夠把上面的代碼生成如下的標(biāo)準(zhǔn) HTML 代碼：

1. <div id="profile"> 

2.   <div class="left column"> 
3.     <div id="date"><%= print_date %></div> 
4.     <div id="address"><%= current_user.address %></div> 
5.   </div> 
6.   <div class="right column"> 
7.     <div id="email"><%= current_user.email %></div> 
8.     <div id="bio"><