在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法。它由Sergey Chikuyonok开发。
你在写HTML代码(包括所有标签、属性、引用、大括号等)上花费多少时间？如果你的编辑器有代码提示功能，你编写的时候就会容易些，但即便如此你还是要手动敲入很多代码。
在JavaScript方面，当我们想要在一个页面上获取某个特定的元素时，我们就会遇到同样的问题，我们必须写很多代码，这就变得难于维护和重用。JavaScript框架应运而生，它们同时引入了CSS选择器引擎。现在，你可以使用简单的CSS表达式来获取DOM元素，这相当酷。
但是，如果你不仅仅可以用CSS的选择器布局和定位元素，还能生成代码会怎么样？比如，如果你这样写：
div#content>h1+p
…然后就可以看到这样的输出：
上面的效果可以用dreamweaver，扩展下载地址 Zen Coding for Dreamweaver v.0.7 测试通过
有些迷惑吧？今天，我将向你介绍Zen Coding，一组用于快速HTML和CSS编码的工具。最初由Vadim Makeev在2009年4月提出(文章为俄语)，由鄙人(也就是我)开发了数月并最终达到比较成熟的状态。Zen Coding由两个核心组件组成：一个缩写扩展器(缩写为像CSS一样的选择器)和上下文无关的HTML标签对匹配器。看一下这个演示视频来看一下它们能为你做些什么。
注意：该视频原版位于Vimeo，但是要看的话需要翻[和谐]墙先，地址在这里：http://vimeo.com/7405114，上面的视频是我费尽周折从Vimeo上下载下来上传到优酷的，上传后质量竟被大打折扣了，囧。youtube上也有一份视频，是基于Aptana的演示，一样很精彩：http://www.youtube.com/watch?v=ug84Ypwqfzk。PS:貌似youtube要比Vimeo翻[和谐]墙容易些，不过如何翻[和谐]墙不在本站讨论范围。
如果你想跳转到详细介绍和使用指南，请看一下演示页面并立刻下载你适用的插件：
Demo 下载(完全支持)- Aptana (跨平台);
- Coda, via TEA for Coda (Mac);
- Espresso, via TEA for Espresso (Mac);
- TextMate (只能用于Mac机,Windows可以使用E-text编辑器替代);
- TopStyle;
- Sublime Text;
- GEdit;
- Dreamweaver CS4
- editArea在线编辑器;
- Zen Coding在线编辑器中文版
现在让我们看一下这些工具是如何工作的吧。
展开缩写展开缩写功能将类似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选择器(呃，“缩写”抱歉)，就像这样…
div#header>img.logo+ul#nav>li*4>a
…然后调用”展开缩写”行为。
这里有两个新增的操作符：元素倍增和条目编号。比如，如果你想生成5个
最后一个——条目编号用于当你想用索引标记重复的元素的情况。假设你想生成class为item1、item2和item3的3个
只需在你想要索引出现的任何class或id属性上添加一个美元符号即可，而且想要多少都可以。那么，这样…
div#i$-test.class$$$*5
会被转换成为:
Zen Coding是如何知道什么时候应该为生成的标签添加默认的属性或者跳过关闭标签的？有一个专门的文件，名为zen_settings.js描述了输出元素。这是一个简单的JSON文件，描述每种语言的缩写(是的，你可以为不同的句法定义缩写，比如HTML、XSL、CSS等)。通用的语言缩写定义看起来就像这样：
元素类型
Zen Coding有两个主要的元素类型：“片段(snippets)” 和 “缩写(abbreviations)”。片段就是随意的代码碎片，而缩写是标签定义。通过片段，你可以写出你想要的任何代码，它也会照你写的格式输出；但是你必须手动的格式化它(使用n 和t实现换行和缩进) 并将${child}变量放到你想要输出子元素的地方，就像这样：cc:ie6>style。如果你不使用${child}变量，子元素将会输出于代码片段的后面。
有了缩写，您必须编写标记定义，而且语法是非常重要的。通常，你必须写一个简单的带有所有默认的属性的标签，比如: