網頁

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倍多的成本,才能完成和我一樣的工作。

參考資料

8 則留言:

  1. 您好,請問一下在VS 2010之下,好像有些功能不能作用,
    你的測試環境是在2010嗎?

    謝謝

    回覆刪除
  2. 我是Visual Studio 2012。

    Visual Studio 2010 有另外的實作套件:「http://visualstudiogallery.msdn.microsoft.com/site/search?query=zen%20coding&f%5B0%5D.Value=zen%20coding&f%5B0%5D.Type=SearchText&ac=8」,效果如何我就沒測試。

    回覆刪除
  3. 我剛剛發現在 WebMatrix 裡面,也有這套耶,用起來 比VS 2010 更快更順

    回覆刪除
    回覆
    1. WebMatrix我沒在用,不過Zen Coding是會讓人一用就愛上的小傢伙。

      刪除
  4. 您好,我是AppUniverz的校園大使,我們星期三有技術日,想參考您的文章並且發表讓更多人知道那麼好用的工具(2013年初就在Follow這個技術),最近寫HTML5突然想到可以介紹這個方便的套件,我們會在最後鍵入您的出處連結,感謝您。

    【技術星期三】 Zen-coding

    當Coder在撰寫Html標籤的時候,最討厭遇到的是一堆重複的符號,打個比方,當腦袋在想div標籤,我就得一筆一筆鍵入< div >< /div >,這樣就得花費11個按鍵盤的時間.......

    那有沒有快速打程式碼的八卦的?

    答案是有的!今天就要來介紹大部分編輯器的外掛套件Zen-Coding,Zen Coding目前可以使用在36套各類HTML與CSS編輯器中,像是Aptana、TextMate (Mac)、Notepad++、PSPad、Dreamweaver、Sublime Text 2、Visual Studio…等常用的編輯器都有支援Zen Coding。

    小編嘗試用Sublime Text 2去測試這款強大的外掛,發現只要鍵入【div】接下來只要點選鍵盤上的【TAB】。咻!!!< div > < /div >標籤就像孫悟空一樣蹦了出來。

    這麼好的套件還不快嘗試!?

    Zen-Coding : https://code.google.com/p/zen-coding/

    中文教學參考於 陳傳興 Blog : http://blog.kkbruce.net/2012/11/zen-coding-extremely-speed-write-your-html5-css3-code.html#.Ut6TtxAVG00

    ----------以上是我們的文章----------

    AppUniverz : https://www.facebook.com/AppUniverz

    校園大使David --- https://www.facebook.com/DavidZhang.DK

    回覆刪除
    回覆
    1. 沒問題。

      發現你們在新竹,我也在新竹說。有需要的話,我可以幫忙介紹一下。^^

      刪除
  5. 看到這篇文章深感慚愧......
    都已經 2015 寫這麼久都還沒發現這種好東西。

    回覆刪除
  6. 不久的將來編程是這樣的,對著麥克風說:寫個網頁,背景來張圖,來張表格,表格里面加個圖片,下面弄點描述,鼠標放在圖上能顯示縮略影像.然後電腦全部自動生成.
    回望現在的我們,發現甚至打代碼都是在浪費生命,不是嗎.

    回覆刪除

感謝您的留言,如果我的文章你喜歡或對你有幫助,按個「讚」或「分享」它,我會很高興的。