HTML/CSS速写神器--Emmet

前端开发过程中总避免不了要写一些HTML和CSS，于是Emmet应运而生，它可以极大的简化我们写代码的流程，提高书写的效率。

Emmet（以前名为Zen Coding）是一套面向文本编辑器的插件，它允许通过内容辅助高速度的编写和编辑HTML、XML、XSL和其他结构化的代码格式。Emmet目前支持多种编辑器，包括一些主流编辑器和IDE，在线编辑器以及第三章插件的的支持。

我用vim来安装和使用Emmet，安装方法见emmet-vim的github文档。

HTML基础语法

安装好后，用 vim index.html 新建文件，键入

html:5

按一下 ,(先按Ctrl+y,松开后再按,)，或者一些编辑器只需要按下Tab就可以了，然后就会惊奇发现，生成了下面的代码。

原本需要三四分钟的头部被我们几秒搞定了。

再来试一试这个命令

div.hander+div#main$0.column*3^div.footer

发现很轻松就生成了一个圣杯布局的html结构。

现在我们来总结一下刚刚的流程。

打开HTML文件=>键入语法命令=>按下 ,=>生成代码

需要注意的一点是Emmet的语法中不允许有空格，比如前面的命令为了好看写成
div.hander + div#main$0.column*3 ^ div.footer**

以上全部就是Emmet的工作方式，超简洁的工作流完成重复的工作。

下面列出了HTML简写规则。

1. E 代表HTML标签。
2. E#id 代表id属性。
3. E.class 代表class属性。
4. E[attr=foo] 代表某一个特定属性。
5. E{foo} 代表标签包含的内容是foo。
6. E>N 代表N是E的子元素。
7. E+N 代表N是E的同级元素。
8. E^N 代表N是E的上级元素。

我们来逐步体验Emmet的优雅和强大。

生成HTML文档的初始结构

• html:5 或 ! 生成HTML5的初始结构
• html:xt 生成HTML4过渡型
• html:4s 生成HTML4严格型

html:xt

html:4s

生成带有id，class的HTML标签

div#name.user

div#name.user.user-adim

兄弟 +

div+p+a

后代 >

div>ul>li

上级元素 ^

div>ul>li^p 一个^表示向上一层

div>ul>li^^p 两个^表示向上两层

重复多份 *

ul>li*5

分组 ()

div+div>ul>li+div 未分组，最后的div将和li平级

div+(div>ul>li)+div 分组以后最后一个div将和第一个div平级

属性 [attr]

a[href="http://bubkoo.com" title="bubkoo's blog"] 属性可以写在[ ]内部

编号 $

ul>li.list-item$ 一个$可以生成递增的一位数字

ul>li.list-item$$ 一个$可以生成递增的两位位数字

ul>li.list-item$@3*5 后面加@N可以从数字N计起

ul>li.list-item$@-3*5 后面加@-N可以从数字N反向计起

文本内容 {}

div>a[href="http://www.google.com"]{google} 文本内容可以用{ }包含起来

google

经常用到的几个HTML缩写

link:favicon

link:css

a:link

form:get

form:post

input:text

input:password

script:src

CSS简写

简写属性和属性值

w100 属性名加属性值，单位默认为px

width: 100px;

w100p 表示width: 100%;
w100e 表示width: 100em;
w100x 表示width: 100ex;

m10-10--20 中间加-连接多个属性，--中第二个-表示负数

margin: 10px 10px -20px;

h10e+w100p +可连接两个属性

 height: 10em;
 width: 100%;

!

  !important

附加属性

@f 生成字体代码结构

  @font-face {
    font-family: ;
    src: url();
  }

@f+ 生成加强版

 @font-face {
    font-family:  'FontName';
    src:  url('FileName.eot');
    src:  url('FileName.eot?#iefix') format('embedded-opentype'),
       url('FileName.woff') format('woff'),
       url('FileName.ttf') format('truetype'),
       url('FileName.svg#FontName') format('svg');
    font-style:  normal;
    font-weight:  normal;
  }
}

浏览器前缀

-foo 属性前面加-，即可添加浏览器前缀

  -webkit-font-smooth: ;
  -moz-font-smooth: ;
  -o-font-smooth: ;
  -ms-font-smooth: ;
  font-smooth: ;

另外，如果输入的缩写不在Emmet中，它将会匹配最接近的那个。

曾经沧海难为水，除却巫山不是云。用过高效编辑工具以后，对各类低效工具都感觉不足以顾了。