Zen Coding.

一种快速编写代码的方法

Transcript

1. Zen Coding 一种快速编写HTML/CSS代码的方法 UED分享 · 交流 http://cssrain.github.io
2. 哪些原因导致你写HTML变慢? • 很长，难记标签代码 (doctype) • 丌常写，丌熟悉的标签代码 (link) • 语义化的代码 (img的alt和title) • Html的所有属性，括号，引用都要写完整 (dl+) • ……
3. 记得它吗，能写出来吗？ <!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>
4. html:xt 演示
5. 有什么方式快速写出？ <div id="content"> <div class="page_top"> <p class="hdwrap"></p> <h1></h1> </div> <div class="column"></div> <div class="column"></div> </div>
6. div#content>(div.page_top>p.hdwrap+h1)+div.column *2 演示
7. 太复杂？拆开来 <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
8. 丌就是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);
9. 这就是Zen Coding 由两个核心组件组成： • 一个缩写扩展器(缩写为像CSS一样的选择器) • 上下文无关的HTML标签对匹配器
10. 支持大多数开发工具 • Visual Studio • TopStyle • Vim • IntelliJ IDEA/WebStorm/PHPStorm • Aptana • Dreamweaver , Sublime Text，Editplus……
11. Zen Coding 资料 http://code.google.com/p/zen-coding/ https://github.com/sergeche/zen-coding/
12. Q&A 谢谢聆听