zen coding

自从用了webstorm后才开始关注zen coding，没想到已经流行Ｎ久了。
规则：

Current features of abbreviation engine

• ID and CLASS attributes:div#page.section.main.
• Custom attributes:div[title],a[title="Hello world" rel],td[colspan=2].
• Element multiplication:li*5will output<li>tag five times.
• Item numbering with $ character:li.item$*3will output<li>tag three times, replacing $ character with item number.
• Multiple '$' characters in a row are used as zero padding, i.e.:li.item$$$→li.item001
• Abbreviation groups with unlimited nesting:div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer. You can literally write a full document markup with just a single line.
• Filters support
• divtag name can be omitted when writing element starting from ID or CLASS:#content>.sectionis the same asdiv#content>div.section.
• (v0.7) Text support:p>{Click }+a{here}+{ to continue}.

实例：
div#page>div.logo+ul#navigation>li*5>a
生成

<div id="page">
	<div class="logo"></div>
	<ul id="navigation">
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
	</ul>
</div>

div.photo*3
生成

<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>

更进一步，div也可省掉，就是说上面的代码在webstorm中只要输入.photo*3再按下tab键就能自动生成。

div>img+(.photoSummary>.photo$*3)+.summaryClear
生成

<div>
    <img src="" alt=""/>
    <div class="photoSummary">
        <div class="photo1"></div>
        <div class="photo2"></div>
        <div class="photo3"></div>
    </div>
    <div class="summaryClear"></div>
</div>

常用的还有
table+, select+

CSS部分

m=> margin
flr=>float: right

积累中。。