使用Emmet(前身Zen Coding)加速Web前端開發

Emmet插件以前被稱作爲Zen Coding，是一個文本編輯器的插件，它可以幫助您快速編寫HTML和CSS代碼，從而加速Web前端開發。早在2009年，Sergey Chikuyonok寫過一篇文章，提出編寫HTML和CSS的新方法。這一革命性的插件指的就是Zen Coding，經過很多開發者多年來的努力與幫助，現在已達到了一個新的水平。也就是今天所說的Emme插件。
在這篇文章中，我們將要學習如何使用Emmet語法來生成HTML和CSS代碼。

安裝Emmet插件

Emmet只是文本編輯器一個插件，要想讓他發揮應用的功能，就得將其安裝到你喜歡的文本編輯器中。到目前爲止，很多流行的文本編輯器都支持Emmet插件，也就是說很多流行的文本編輯器都可以安裝這款插件。

點擊下面的鏈接，按照說明文檔可以給對應的文本編輯器安裝Emmet插件：

它是如何工作的？

在Web前端開發中，我們不得不面對一個殘酷的現實。在寫HTML代碼時需要一定的時間，因爲我們要花大把的時間寫HTML標籤，屬性，引號等；同樣在編寫CSS時，我們要寫很多的屬性、屬性值，大括號和分號等。當然，大多數的文本編輯器都或多或少帶有代碼自動提示功能，在開發之時，幫了很大的忙，但仍然需要人工輸入很多代碼。而Emmet插件，集成了很多縮寫，大家在開發時只需要輸入簡單的縮寫，按tab鍵或ctrl+E鍵就能擴展出所需的代碼片段。

Emmet和HTML

假定你已經爲您自己喜歡的文本編輯器成功的安裝好了Emmet插件，接下來我們來簡單的看看如何使用Emmet幫助您快速編寫您的HTML標籤。

Emmet使用定義的縮寫來生成元素。他的語法和CSS的選擇器非常類似：

ul>li>img+p

一旦你寫好縮寫之後，按一下tab鍵(我使用的是Sublime Text編輯器)就能生成你所請求的代碼。上面的例子將會產生下面的代碼：

<ul>
    <li>
        <img src="" alt="">
        <p></p>
    </li>
</ul>

接下來，讓我們來深入一點了解Emmet語法，來看看如何通過一些更復雜的縮寫創建HTML標籤。
創建初始文檔
任何一個HTML文件，都具有一些默認的文檔結構。使用Emmet來創建需要的時間不到一秒。只要輸入!或html:5，然後點擊tab鍵，你就會看到一個HTML5的doctype默認標籤。

html:5或!：HTML5文檔類型
html:xt：XHTML過渡型文檔類型
html:xs：XHTML嚴格型文檔類型
html:4t：HTML4過渡型文檔類型
html:4s：HTML4嚴格型文檔類型

子元素>
使用>運算符可以用來生成彼此嵌套的元素：

section>div>p

<section>
    <div>
        <p></p>
    </div>
</section>

相鄰元素+
使用+運算符可以用來生成彼此相鄰的元素：

section+div+p

上面代碼會生成下面的代碼：

返回上一層^
使用^運算符，可以讓你的代碼返回上一層。當你使用>嵌套元素時，想讓後面的回到上一層，那麼這個方法很適用。

section>div>p>a^p

這個縮寫將兩個段落元素都放置在div內，但只有第一個段落裏會包含一個鏈接。

<section>
    <div>
        <p><a href=""></a></p>
        <p></p>
    </div>
</section>

其實這個就相當於：

section>div>(p>a)+p

乘法*
如果你想一次性生成多個相同的元素，比如列表中的li，那麼就可以使用乘法運算符*:

ul>li*5

上面代碼會生成不個li：

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

除了能一次性生成多個相同的標籤之外，我們還可以通過$符號做遞增；通過$@-符號做遞減；通過$@3*5這樣的方式從第三個開始命名：組合爲了更有效的利用嵌套，我們常會製作一些代碼片段。在Emmet中你可以通過()將一個塊組合在一起，來看一個簡單的示例：

ul>(li>a)*3

上面的代碼就會生成3個li，而且每個li中套了一個a:

<ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>

在我們一個頁面中，常會包括頁頭、主體和頁腳三個部分，我們很多時候就可以通過對全們進行一個組合，快速生成有效的代碼：

快速添加類名、ID、文本和屬性
在Emmet中，還有一個功效，能快速幫助你添加類名、ID、文本和屬性。

使用E#ID添加ID名
使用E.class添加類名
使用E[attr]添加屬性
使用E{text}添加文本

省略標籤名
在Emmet中可以省略標籤名，默認情況下，如.item和div.item起到的作用是一致的

<div class="item"></div>

在實際中還有幾種情況：

ul和 ol中輸入指的是li
table、tbody、thead和tfoot指的是tr
tr中指的是td
select和optgroup指的是option

Emmet和CSS

屬性
CSS提供了屬性的值，比如font-size，margin和 padding等等：

Emmet定義了所有已知的CSS屬性和縮寫。所以border-bottom縮寫是bdb，border-top縮寫是bdt。正如下面的示例font-size縮寫是fz：

假設你在你的編輯器中輸入fz，然後按一下tab鍵，Emmet就像一個魔法師一樣將縮寫變成有效的CSS，並且放在你的光標之處。

屬性值
現在我們已經瞭解了CSS的屬性，它只需要添加一個值。這是通過一個組合縮寫和所需要的值一起來完成。例如，fz18將輸出font-size:18px。你不需要輸入px，因爲Emmet將會其單位是px。如果一個項目沒有一個單位（如font-weight），Emmet會很聰明，他不會添加像素單位。

單位
如果你在CSS不經常使用的像素(px)單位，那會是什麼？是em、rem、%、ex和px嗎？那麼這些單位在Emmet中都是可以使用的。在Emmet中每一個單位都有其縮寫形式：

px→ 默認
p→ %
e→ em
r→ rem
x→ ex
要使用一個單位，只需要在值的後面使用縮寫的單位值。下面的例子是使用em定義font-size：

多個單位
CSS中的某些屬笥，比如margin，允許多個值。在Emmet中要做到這一點，只需要每個值之間使用破折號(-)。來看看下面的例子，給body定義margin的四個值：

顏色
在Emmet中使用#前綴，後面緊跟顏色值，但不同的字符數將會輸出不同的十六進制代碼。來看一些例子：

＃1→ ＃111111
＃E0→ ＃e0e0e0
＃FC0→ ＃FFCC00
下面定義通過c#2定義body的顏色值，將會輸出#222：

!important
儘管在CSS中!important並不經常使用，但在Emmet也帶有一定的縮寫。添加!就可以自動生成：

多屬性
現在我們具Emmet的CSS特性的一個基本瞭解，也是將它們放在一起的時候。就類似於Emmet和HTML中的相鄰元素的功能。可以使用加號+運算符來創建多個屬性。我們來看一個簡單的示例：

示例
記住，你可以使用所有縮寫或者將其分開。這並不是很重要，關鍵的是你要使用得正確，它能更容易讓你編寫你的CSS。這裏有一個動畫，他給div.panel創建一些樣式：

總結
Emmet是一個強大的工具，也被稱爲是一款高速的編碼工具，它可以讓你花更少的時間做同樣的事情，而無需手動創建自己的代碼片段。Emmet的靈感來自於CSS選擇器以及可以用於所有主要的文本編輯器，以適應開發者的工作流程。