Zen Coding: 一种快速写HTML/CSS代码的方法

2009年4月Vadim Makeev提出了一种使用CSS-like选择器生成代码的方法，例如：

div#content>hi+p

会被翻译成：

<divid="content"><hi></hi><p></p></div>

原文链接：https://www.smashingmagazine.com/author/sergey-chikuyonok/

ZenCoding包含两部分：缩写展开和上下文无关的HTML标签对匹配。

1 缩写展开：CSS-like选择器

1.1 为什么不叫CSS选择器：

CSS选择器是选中一部分内容，而这个是展开一个简短的内容。

它只支持CSS选择器的部分语法，并添加了一些新的操作。

1.2 支持的属性和操作：

E 元素名（div，p）

E#id 带有id的元素（div#content，p#intro，span#error）

E.class 带有class的元素（div.header，p.error.critical），你也可以混用class和id（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）

示例：

div#i$-test.class$$$*5

会被翻译成：

<div id="i1-test" class="class001"></div>

<div id="i2-test" class="class002"></div>

<div id="i3-test" class="class003"></div>

<div id="i4-test" class="class004"></div>

<div id="i5-test" class="class005"></div>

2 上下文无关的HTML标签对匹配

这部分用的不多，暂不讨论。

3 相关插件

Emmet: https://www.emmet.io/，快捷键^E。