Emmet:html/css Code Quick Authoring Artifact

Emmet's predecessor is the famous Zen coding, if you are engaged in web front-end development, the plugin must not be unfamiliar. It uses the syntax of the faux CSS selector to generate code, greatly improving the speed of HTML/CSS code writing, such as the following demo:

The Code demo under Zen coding

At the end of last year, the plugin had been renamed Emmet. but Emmet not only renamed, but also brought some new features. This article is to show you intuitively.

first, quickly write HTML code

1. Initialize

HTML documents need to contain some fixed tags, such as

• Html:5 or!: for HTML5 document types
• HTML:XT: For XHTML transition Document types
• Html:4s: For HTML4 Strict document types

2. Easily add classes, IDs, text, and attributes

Continuous INPUT element names and Id,emmet will be automatically complete for you, such as input p#foo:

Successive input classes and IDs, such as P.bar#foo, are generated automatically:

HTML code

1. <p class="Bar" id="foo"></P>

Here's a look at how to define the content and properties of HTML elements. You can automatically generate the following code by entering H1{foo} and a[href=#]:

HTML code

1. <H1>foo</H1>
2. <a href="#"></a>

3. Nesting

Now you just need 1 lines of code to implement the nesting of tags.

• : A child element symbol that represents a nested element
• +: Sibling tag symbol
• ^: You can raise the label in front of the symbol by one line

The effect is as follows:

4. Grouping

You can quickly generate blocks of code by nesting and parentheses, such as input (. foo>h1) + (. bar>h2), which automatically generates the following code:

HTML code

2. <div class="foo">
4. <H1></h1>
6. </div>
8. <div class="Bar">
10. <h2></h2>
12. </div>

5. Implicit tags

Declare a tag with a class, just enter Div.item, generate <div class= "item" ></div>.

In previous versions, you can omit the Div, which is the input. Item to generate <div class= "item" ></div>. Now if you enter only. Item, Emmet is judged based on the parent tag. For example, entering. Item in <ul> will generate <li class= "item" ></li>.

Here are all the implicit tag names:

• Li: Used in UL and OL
• TR: For table, Tbody, THEAD, and Tfoot
• TD: Used in TR
• Option: for Select and Optgroup

6. Define multiple elements

To define multiple elements, you can use the * symbol. For example, UL>LI*3 can generate the following code:

HTML code

1. <ul>
2. <li></li>
3. <li></li>
4. <li></li>
5. </ul>

7. Define multiple elements with attributes

If you enter ul>li.item$*3, the following code will be generated:

HTML code

2. <ul>
4. <li class="item1"></li>
6. <li class="item2"></li>
8. <li class="Item3"></li>
10. </ul>

Second, the CSS abbreviation

1. Value

For example, to define the width of an element, simply enter w100 to generate

CSS Code

1. width:100px;

In addition to PX, other units can be generated, such as input h10p+m5e, the result is as follows:

CSS Code

1. Height: 10%;
2. Margin:5em;

List of unit aliases:

• p =%
• E means EM
• X means ex

2. Additional Properties

Maybe you've already learned some abbreviations, such as @f, that you can generate:

CSS Code

1. @font-face {
2. Font-family:;
3. Src:url ();
4. }

Some additional options, such as Background-image, Border-radius, Font, @font-face,text-outline, Text-shadow, etc., can be generated by the "+" symbol, such as input @f+, will be generated:

CSS Code

2. @font-face {
4. font-family: ' fontname ';
6. Src:url (' Filename.eot ');
8. Src:url ('filename.eot #iefix ') format (' Embedded-opentype '),
10. URL ('filename.woff ') format (' Woff '),
12. URL (' Filename.ttf ') format (' TrueType '),
14. URL ('filename.svg#fontname ') format (' svg ');
16. Font-style:normal;
18. Font-weight:normal;
20. }

3. Fuzzy matching

If you are unsure of some abbreviations, Emmet will match your input to the closest syntax, such as input ov:h, ov-h, OVH, and oh, and the generated code is the same:

CSS Code

1. Overflow:hidden;

4. Vendor prefix

If you enter a non-standard CSS property, Emmet will automatically add a vendor prefix, such as entering TRS, to generate:

CSS Code

1. -webkit-transform:;
2. -moz-transform:;
3. -ms-transform:;
4. -o-transform:;
5. Transform:;

You can also prefix any property with a "-" symbol, or you can add it to the attribute. such as input-super-foo:

CSS Code

1. -webkit-super-foo:;
2. -moz-super-foo:;
3. -ms-super-foo:;
4. -o-super-foo:;
5. Super-foo:;

If you do not want to add all the prefixes, you can use abbreviations to specify, such as-WM-TRF to add only the-webkit and-moz prefixes:

CSS Code

1. -webkit-transform:;
2. -moz-transform:;
3. Transform:;

The prefix is abbreviated as follows:

• W indicates-webkit-
• M represents-moz-
• s represents-ms-
• O indicates-o-

5. Gradients

Entering LG (left, #fff 50%, #000) generates the following code:

CSS Code

1. background-image: -webkit-gradient (linear,  0 0, 100% 0 ,  color-stop (0.5,  #fff),  to (#000));  
2. background-image: -webkit-linear-gradient (left, # Fff 50%, #000)   
3. Background-image: -moz-linear-gradient (left,  #fff  50%, # 000)   
4. background-image: -o-linear-gradient (left,   #fff  50%, #000)   
5. Background-image: linear-gradient (left,  #fff  50%, # 000)   

third, additional functions

generate Lorem ipsum text

Lorem ipsum refers to a Latin article commonly used in the field of typography, the main purpose of which is to test the effect of an article or text in different font and version types. With Emmet, you can simply enter Lorem or lipsum to generate the text. You can also specify the number of words, such as LOREM10, that will be generated:

Reference Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero Delectus.

Iv. Customization

You can also customize the Emmet plugin:

• To add a new abbreviation or update an existing abbreviation, you can modify the Snippets.json file
• Change the behavior of Emmet filters and actions to modify the Preferences.json file
• Define how to generate HTML or XML code to modify the Syntaxprofiles.json file

v. Plugins for different editors

Emmet supports the following editor (linked to the Emmet plugin for the editor):

• Sublime Text 2
• TextMate 1.x
• Eclipse/aptana
• Coda 1.6 and 2.x
• Espresso
• Chocolat (added via the "Install Mixin" dialog box)
• Komodo Edit/ide (added via tools→add-ons menu)
• notepad++
• PSPad
• <textarea>
• Codemirror2/3
• Brackets

Related documents: http://docs.emmet.io/(which contains a demo, you can experiment with the abbreviations mentioned in the article)

Emmet:html/css Code Quick Authoring Artifact