搜尋

隨機推薦

Zen Coding - 超高效率編寫 HTML, CSS 代碼的新方法

 

在本文中我們將展示一種新的使用仿CSS選擇器的語法來快速開發HTML和CSS的方法。它由Sergey Chikuyonok開發。

你在寫HTML代碼(包括所有標籤、屬性、引用、大括號等)上花費多少時間?如果你的編輯器有代碼提示功能,你編寫的時候就會

廣告

容易些,但即便如此你還是要手動敲入很多代碼。

 

在JavaScript方面,當我們想要在一個頁面上獲取某個特定的元素時,我們就會遇到同樣的問題,我們必須寫很多代碼,這就變得難於維護和重 用。JavaScript框架應運而生,它們同時引入了CSS選擇器引擎。現在,你可以使用簡單的CSS表達式來獲取DOM元素,這相當酷。

但是,如果你不僅僅可以用CSS的選擇器佈局和定位元素,還能生成代碼會怎麼樣?比如,如果你這樣寫:

div#content>h1+p

…然後就可以看到這樣的輸出:

<div id="content">
<h1></h1>
<p></p>
</div>

有些迷惑吧?今天,我將向你介紹Zen Coding,一組用於快速HTML和CSS編碼的工具。最初由Vadim Makeev在2009年4月提出(文章為俄語),由鄙人(也就是我)開發了數月並最終達到比較成熟的狀態。Zen Coding由兩個核心組件組成:一個縮寫擴展器(縮寫為像CSS一樣的選擇器)和上下文無關的HTML標籤對匹配器。看一下這個演示視頻來看一下它們能為你做些什麼。

 

Zen Coding v0.5 from Sergey Chikuyonok on Vimeo.


如果你想跳轉到詳細介紹和使用指南,請看一下演示頁面並立刻下載你適用的插件:

Demo

下載(完全支持)

下載(部分支持,只支持「展開縮寫」)

現在讓我們看一下這些工具是如何工作的吧。

 

廣告

无觅相关文章插件,快速提升流量

Please publish modules in offcanvas position.