Zen-Coding - 教你極速撰寫HTML5與CSS3程式碼

什麼是Zen-Coding？

Zen Coding本身是個外掛程式，官網上的資料，Zen Coding目前可以使用在36套各類HTML與CSS編輯器中，像是Aptana、TextMate (Mac)、Notepad++、PSPad、Dreamweaver、Sublime Text 2、Visual Studio…等常用的編輯器都有支援Zen Coding。

那Zen-Coding的作用是什麼呢？它的目標很簡單，就是利用已有的技術，高速的架構出HTML、CSS、XML、XSL或HAML。什麼是已有的技術，簡單說，它是CSS Selector（CSS選擇器）的再利用。

一些些改變，能帶來什麼呢？

極速

就我使用Zen-Coding它的經驗而言，就算只是簡單拿來產出HTML5或CSS3的程式碼，Zen-Coding也可以非常有效率的加速我寫HTML5與CSS3的速度，加多少，這我很難用言語或文字表示，先看一段影片：

哇!哇!哇!哇!哇!哇!

如果看完沒有跟著哇！那再來一次！

哇!哇!哇!哇!哇!哇!

要教大家使用Zen-Coding之前，大家可以找一套支援的編輯器來練習。Visual Studio 2012可以安裝Web Essentials 2012擴充套件，安裝完就預設啟用。另一套我目前常用的Sublime Text 2，透過Package Control尋搜"Zen Coding"安裝後也能取得支援。其他NotePad++等請參考官網都有說明。

符號	說明	範例
#	建立一個id屬性	div#header 建立一個含id="header"的div元素。
.	建立一個class屬性	div.nav 建立一含class="nav"的div元素。
[]	自訂屬性	div[data-role] 建立一個含自訂屬性data-role=""的div元素。
>	建立一個子元素	table>tr>td 建立一個含一行一列的table元素。
+	建立一個兄弟元素	div>p+span 建立一個含有p與span的div元素。p與span為兄弟元素。
^	升層	div>ul>li*3^^p 這要用DOM Tree來看，div是第一層，ul是第二層，li是第三層，p的位置本應該與li同一層，但因為有^升層符號，所以p的位置會上升一層。一個^升層符號升1層，^^等於升兩層的意思，以此類推。Web Essentials 2012支援，不過目前1.9版的實作^會等於^^的效果。Sublime Text 2不支援。
*	複製數量	tr>td*3 建立一個含有3個td的tr。
$	增量變數	section>article.item$*3 建立一個含有三個article元素，且每個元素都有class="item$"屬性的section元素段落。$後面因為是*3，所以會自動編號為1,2,3，即class="item1"，class="item2"，class="item3"。
$$	增量變數	section>article.item$$*11 $$為兩碼增量變數，編號會由01開始到11。
{}	文字節點	ul>li{Item $$}*4 建立一個含有三個li元素的ul元素段落，且li元素預設產生文字Item 01，Item 02等說明文字。
()	群組	目前在Sublime Text 2與Visual Studio 2012測試，都還不支援。不過，Web Essentials 2012擴充套件的作者有說，會盡快加上此功能。

以上就是那麼簡單，只要輸入完規則後按下【Tab】鍵，Zen Coding就會產生你想要的程式碼架構。

如何寫Zen-Coding規則

使用了Zen-Coding後，剛開始一定會卡卡的，因為以前的習慣就是開啟檔案，然後開始寫Code，例如，開啟一個MVC的View，然後開始打<p>Blah Blah Blah</p>，但使用Zen-Coding的過程是：

1. 先想好，你想要的架構
2. 將架構轉換為Zen-Coding規則
3. 按個Tab，完成

產生的程式碼架構有問題，我也是習慣按個【Ctrl+Z】回去修改Zen-Coding規則，再按個【Tab】來重新產生程式碼架構。

Zen Coding技巧：熟能生巧。寫之前先想，多下幾次Zen-Coding規則，把上表的幾個內容記熟即可。

以上都是說Zen-Coding在產生HTML架構的優點，硬要說有沒有缺點的話，也是有的。

Zen-Coding的CSS規則是使用縮寫的方式，例如，color它用c代表，text-shadow它用tsh代表，使用與學習上就沒有像HTML的產生那麼直覺，必須花時間熟悉縮寫規則，才能產生快速寫CSS的效率。另一個是實作的外掛擴充程式的問題，例如， 「li*3+p」或「form:post>input:t」，在目前Web Essentials 2012 1.9版都還不正常，到是Sublime Text 2是正常的。不過我相信，這些問題不久就會修正（我有反應給作者）。

結論

Zen-Coding寫HTML5真的很好用，不管是寫MVVM或是jQuery Mobile的頁面，例如，影片最後一個範例，就是在Knockout.js要用的元素。

Zen-Coding能幫助我們超快速產生大量HTML程式碼架構，非常快又有效。以HTML而言，我都快要忘記<與>的存在了，尤其是產生ul與li，或是table等，都可以省下大量打字的時間，就算是產生個<p></p>，我現在也就很習慣按個p與Tab，你可以算算，<p></p>是打7下，p與Tab是打2下，以打字的生產力而言，我是你的整整3倍多（7：2），反之，你必須多花費我3倍多的成本，才能完成和我一樣的工作。

參考資料

• Web Essentials 2012
• Zen Coding官網
• Zen Coding in Visual Studio 2012
• Zen Coding的CSS示範影片 大概看前1:30就夠了
• Zen Coding語法速查表