使用仿CSS選擇器的語法來快速開發HTML和CSS ——由Sergey Chikuyonok開發。
Zen Coding由兩個核心組件組成：一個縮寫擴展器(縮寫為像CSS一樣的選擇器)和上下文無關的HTML標籤對匹配器。
基本介紹
- 中文名：Zen Coding
- 方式：使用仿CSS選擇器的語法
- 功能：快速開發HTML和CSS
- 特點：兩個核心組件組成
展開縮寫,縮寫包裹,編輯器,編寫實例,
展開縮寫
展開縮寫功能將類似CSS的選擇器轉換為XHTML代碼。術語“縮寫”可能會有點兒難以理解。為什麼不直接稱之為“CSS選擇器”呢？嗯，首要原因是語義化：“選擇器”意為選擇一些東西，但是在這裡我們事實上是生成 一些東西，是寫一個長代碼的較短的替代。其次，它只是使用真實的CSS選擇器語法的一個小的子集，並添加了一些新的操作符。
這裡是一個支持的屬性和操作符的列表：
E元素名稱(div, p);E#id使用id的元素(div#content, p#intro, span#error);E.class使用類的元素(div.header, p.error.critial). 你也可以聯合使用class和idID: div#content.column.width;E>N子代元素(div>p, div#footer>p>span);E+N兄弟元素(h1+p, div#header+div#content+div#footer);E*N元素倍增(ul#nav>li*5>a);E$*N條目編號 (ul#nav>li.item-$*5);正如你能看到的，你已經知道如何使用Zen Coding了：只是些一個簡單的仿CSS選擇器。
元素類型Zen Coding有兩個主要的元素類型：“片段(snippets)” 和 “縮寫(abbreviations)”。片段就是隨意的代碼碎片，而縮寫是標籤定義。通過片段，你可以寫出你想要的任何代碼，它也會照你寫的格式輸出；但是你必須手動的格式化它(使用\n 和\t實現換行和縮進) 並將${child}變數放到你想要輸出子元素的地方，就像這樣：cc:ie6>style。如果你不使用${child}變數，子元素將會輸出於代碼片段的後面。
有了縮寫，您必須編寫標記定義，而且語法是非常重要的。通常，你必須寫一個簡單的帶有所有默認的屬性的標籤，比如: <a href=”"></a>。當Zen Coding被載入後，它會解析一個標籤定義到一個描述該標籤的名字、屬性(包括它們的順序)以及該標籤是否為空的特定的對象中。所以，如果你寫<img src=”" alt=”" />，你會告訴Zen Coding這個標籤必須是空的，然後“擴展縮寫”行為就會在輸出之前為它使用特定的規則。
對於片段和縮寫，你可以添加一個管道符號，它告訴Zen Coding當縮寫被展開的時候游標會被定位到哪裡。默認的，Zen Coding 將游標放在空屬性的引號中間以及開始和關閉標籤的中間。
縮寫包裹
這真的是一個很酷的特性，它將縮寫和標籤對匹配器的功能合併到一起了。你有多少才發現你需要添加一個包裹元素以修正一個瀏覽器bug？或者你需要添加一個裝飾，比如一個背景圖片或者框線到一個塊級內容？你必須寫開始標籤，臨時打斷你的代碼，找到相關的點然後關閉標籤。這就是“使用縮寫包裹”能幫助你的地方。
該功能相當簡單：它要求你輸入縮寫，然後執行適當的“展開縮寫”行動並將你期望的文本放到你縮寫的最後一個元素裡面。如果你沒有選擇任何文本，它就會啟動標籤對匹配器並使用結果。它同樣能搞清楚你的游標的位置：標籤的內容裡面或者是開始和關閉標籤中間。依賴於它的位置，它會包裹標籤的內容或標籤本身。
縮寫包裹為包裹個別行引入了一個特定的縮寫句法。簡單跳轉到倍增操作符後面的數字，比如：ul#nav>li*>a。當Zen Coding 發現一個使用未定義的倍增數的時候，它會將它作為一個重複元素：你的章節中有多少行，它就會輸出多少次，並將每行的內容放到重複元素的最後一個子元素裡面。
編輯器
Zen Coding並不依賴某個特定的編輯器。它是一個只處理文本的出色的組件：它獲取文本、做一些處理並放回新的文本(或索引，用於標籤匹配)。Zen Coding由JavaScript和Python編寫，所以它實際上可以運行於任何平台。在Windows，你可以運行JavaScript版本，而Mac和Linux 分支可以使用Python版。
如果讓你的編輯器支持Zen Coding，你需要寫一個特定的可以在你的編輯器和Zen Coding之間轉換數據的外掛程式。問題是一個編輯器可能不會完整的支持Zen Coding因為它本身的外掛程式系統。比如，TextMate通過使用腳本輸出替換當前行很容的就支持了“展開縮寫”功能，但是它不能處理標籤對匹配因為沒有標準的方法請求TextMate來選擇內容。
編寫實例
CSS縮寫形式：
div#page>div.logo+ul#navigation>li*5>a
套用於網頁HTML的樣式：
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href=" "></a></li>
<li><a href=" "></a></li>
<li><a href=" "></a></li>
<li><a href=" "></a></li>
<li><a href=" "></a></li>
</ul>
</div>
目前 Zen Coding 已經更名為 Emmet。 更名之後，據說 Emmet 開始團隊模式，增加CSS3和HTML5許多新特性。項目地址從 code.google 移 github.
