Zen Coding.

Zen Coding 一种快速编写HTML/CSS代码的方法 UED分享 · 交流 http://cssrain.github.io

哪些原因导致你写HTML变慢? • 很长，难记标签代码 (doctype) • 丌常写，丌熟悉的标签代码 (link) • 语义化的代码 (img的alt和title)
• Html的所有属性，括号，引用都要写完整 (dl+) • ……

记得它吗，能写出来吗？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html
xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF- 8" /> <title></title> </head> <body> </body> </html>

html:xt 演示

有什么方式快速写出？ <div id="content"> <div class="page_top"> <p class="hdwrap"></p> <h1></h1> </div> <div
class="column"></div> <div class="column"></div> </div>

div#content>(div.page_top>p.hdwrap+h1)+div.column *2 演示

太复杂？拆开来 <div id="content"> <div class="page_top"> <p class="hdwrap"></p> <h1></h1> </div> <div
class="column"></div> <div class="column"></div> </div> div#content > ( div.page_top > p.hdwrap+h1 ) + div.column*2

丌就是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一样的选择器) • 上下文无关的HTML标签对匹配器

支持大多数开发工具 • Visual Studio • TopStyle • Vim • IntelliJ
IDEA/WebStorm/PHPStorm • Aptana • Dreamweaver , Sublime Text，Editplus……

Zen Coding 资料 http://code.google.com/p/zen-coding/ https://github.com/sergeche/zen-coding/

Q&A 谢谢聆听

Zen Coding.

Zen Coding.

cssrain

More Decks by cssrain

Other Decks in Technology

Featured

Transcript

Zen Coding 一种快速编写HTML/CSS代码的方法 UED分享 · 交流 http://cssrain.github.io

哪些原因导致你写HTML变慢? • 很长，难记标签代码 (doctype) • 丌常写，丌熟悉的标签代码 (link) • 语义化的代码 (img的alt和title)

记得它吗，能写出来吗？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

html:xt 演示

有什么方式快速写出？ <div id="content"> <div class="page_top"> <p class="hdwrap"></p> <h1></h1> </div> <div

div#content>(div.page_top>p.hdwrap+h1)+div.column *2 演示

太复杂？拆开来 <div id="content"> <div class="page_top"> <p class="hdwrap"></p> <h1></h1> </div> <div

丌就是CSS嘛 E 元素名称(div, p); E#id 使用id的元素(div#content, p#intro, span#error); E.class 使用类的元素(div.header,

这就是Zen Coding 由两个核心组件组成： • 一个缩写扩展器(缩写为像CSS一样的选择器) • 上下文无关的HTML标签对匹配器

支持大多数开发工具 • Visual Studio • TopStyle • Vim • IntelliJ

Zen Coding 资料 http://code.google.com/p/zen-coding/ https://github.com/sergeche/zen-coding/

Q&A 谢谢聆听