Faster Workflow: Mastering Emmet, Part 3

In this part of the Emmet series we will learn about syntax and function.

Key Takeaways

• Emmet syntax and functions allow for a more efficient HTML and CSS workflow by using syntax similar to CSS selectors for describing element positions and attributes, and by applying classes and ids with . and #.
• Emmet enables the creation of complex HTML structures through the use of operators such as ‘>’ for nesting elements, ‘+’ for creating sibling items, ‘^’ for climbing one level up in the HTML tree, ‘*’ for defining how many times an element should be outputted, and ‘$’ for numbering repeated elements.
• The tool also allows for the grouping of elements using ‘()’ and the addition of custom attributes to elements using square brackets ‘[]’, as well as the addition of default text to elements using curly braces ‘{}’.
• Emmet’s CSS resolver expands abbreviations into complete CSS properties, simplifies the use of vendor prefixes, and makes it easy to write CSS3 gradients, while its ‘lorem’ shortcut generates lorem ipsum text on the fly.

Emmet syntax and Functions

Emmet uses syntax similar to CSS selectors for describing element positions inside generated tree and element attributes. You can use element names like div or p to generate HTML tags.

Applying Classes and ids with . and #

. is used to add classes to elements and # is used to add ids. Here are some example for ids and classes. You can apply multiple ids and classes to any element.

Classes

ul.nav.nav-main.nav-static

will generate

<ul class="nav nav-main nav-static"></ul>

Ids

header#site-header

will generate

<header id="site-header"></header>

As you can see in the above examples, I have applied multiple classes to the ul.

Child elements: >

> is used to to nest elements inside each other. You can use multiple times. It can be useful to create navigation menus and lists. See the code below i am going to create a nav menu with ul, list item and list item will be a link.

nav>ul>li>a

will generate the following nav menu. nav is a parent item, then we have ul as a child element and li with a tag as a grandchild.

<nav>
	<ul>
		<li>
			<a href=""></a>
		</li>
	</ul>
</nav>

Sibling: +

The + sign is used to create sibling items. It is useful to create elements near each other, on the same level. The following abbreviation will generate three siblings.

header+.main+footer

will output

<header></header>
<div class="main"></div>
<footer></footer>

Climb up: ^

With > you can create elements inside each other. But if you want to climb one level up in the created HTML tree, you will have to use the ^ symbol. Let’s see an example of the same abbreviation with different + and ^ operators.

Example 1: +

header+article>p>str+bq+footer

will generate the following code.

<header></header>
<article>
	<p>
		<strong></strong>
		<blockquote></blockquote>
		<footer></footer>
	</p>
</article>

As you can see strong, blockquote and footer are nested inside the p paragraph tag, but we want to blockquote after p as a sibling element and footer as a different section. For this purpose we will have to use the ^ operator.

Example 2: ^

Type the following code and hit tab.

header+article>p>str^bq^footer

and we have the markup that we need:

<header></header>
<article>
	<p><strong></strong></p>
	<blockquote></blockquote>
</article>
<footer></footer>

Multiplication: *

Multiplication is one of the very useful features in Emmet. With the * operator you can define how many times element should be outputted. It can be very helpful to create navigation menus with multiple list items.

nav>ul>li*5>a

will generate an unordered list with five list item. I have also used the a tag to make the list items clickable links. You can replace 5 with your desired number.

<nav>
	<ul>
		<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>
</nav>

Item numbering: $

We can use the multiplication *operator to repeat elements, but with $ we can number them. Use the $ operator inside an element’s name, attribute’s name or attribute’s value to output the current number of the repeated element. It can be used to create lists with numbering. Let’s see some examples of how the $ operator works.

Example 1: Item numbering

ul>li.item$*5

following mark up.

<ul>
	<li class="item1"></li>
	<li class="item2"></li>
	<li class="item3"></li>
	<li class="item4"></li>
	<li class="item5"></li>
</ul>

To add 0 (zero) before numbers, use multiple $ signs. li.item$$ will generate <li class="item01"></li> and li.item$$$ will generate <li class="item001"></li>.

Example 2: adding zero before numbers

ul>li.item$$*5>a

out outs the following code. You can see 0 before numbers.

<ul>
	<li class="item01"><a href=""></a></li>
	<li class="item02"><a href=""></a></li>
	<li class="item03"><a href=""></a></li>
	<li class="item04"><a href=""></a></li>
	<li class="item05"><a href=""></a></li>
</ul>

Example 3: Changing direction

It is also possible to change the direction of numbering. Emmet uses the @- modifier to change the direction.

ul>li.item$$@-*5>a

will out put following HTML markup, an unordered list with descending numbers.

<ul>
	<li class="item05"><a href=""></a></li>
	<li class="item04"><a href=""></a></li>
	<li class="item03"><a href=""></a></li>
	<li class="item02"><a href=""></a></li>
	<li class="item01"><a href=""></a></li>
</ul>

Changing the numbering base: Starting number

To change the counter base value, add a @N modifier to $. With this modifier you can set your desired starting number.

ul>li.item$@3*5

expands to the following markup.

<ul>
	<li class="item3"></li>
	<li class="item4"></li>
	<li class="item5"></li>
	<li class="item6"></li>
	<li class="item7"></li>
</ul>

It is possible to use both base @N and direction @- modifier together. Here is an example.

ul>li.item$@-3*5>a

will transform into the following markup.

<ul>
	<li class="item7"><a href=""></a></li>
	<li class="item6"><a href=""></a></li>
	<li class="item5"><a href=""></a></li>
	<li class="item4"><a href=""></a></li>
	<li class="item3"><a href=""></a></li>
</ul>

Grouping: ()

Grouping elements is also very easy with Emmet. You can use () to group elements or sections. With groups, you can literally write full page markup with a single abbreviation.

Let’s create the markup for our page with header, .main and footer.

(header>nav>ul>li*3>a)+(.main>article.primary>h1+p^aside#sidebar)+footer>p{© 2013}

will generate the following markup for our page.

<header>
	<nav>
		<ul>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
		</ul>
	</nav>
</header>

<div class="main">
	<article class="primary">
		<h1></h1>
		<p></p>
	</article>
	<aside id="sidebar"></aside>
</div>

<footer>
	<p>© 2013</p>
</footer>

Custom attributes with square brackets: [ ]

Emmet can use [attr] notation (as in CSS) to add custom attributes to your elements, for example for a link. It is useful to add default values to elements. You can place as many attributes as you like inside square brackets [ ]. If you don’t specify attribute values Emmet will produce tab stops inside each empty attribute (if your editor supports them).

Attribute without values

Example 1: No value

a[title]

will generate the following markup with out any value.

<a href="" title=""></a>

Example 2: With default values

td[title="Hello world!" colspan=3]

will generate the following markup.

<td title="Hello world!" colspan="3"></td>

Example 3: Attribute with values (multiple or single)

a[href="https://www.sitepoint.com" title="Learn HTML, CSS and more" target="_blank"]

will generate a link with default values.

<a href="https://www.sitepoint.com" title="Learn HTML, CSS and more" target="_blank"></a>

Text: {}

Adding default text to elements is simple, you can use curly braces {} with any element a, p, h1 to add custom text.

SimpelExample:

a{click here}

will output

<a href="">click here</a>

More Complex Example:

Here is one more complex example. If you type

p>{Click }+a{here}+{ to continue}

and hit Tab or Ctr+E to expand it, you will have the following markup.

<p>Click <a href="">here</a> to continue</p>

Dummy text with lorem ipsum

Web developers often use lorem ipsum text to add dummy data to their web pages, and to test how their HTML templates will look with real data. There are third party websites to generate lorem ipsum dummy text like http://www.lipsum.com/ and http://loremipsum.net/, but with Emmet you can generate lorem ipsum text on the fly.

Normally, lorem ipsum generates 30-word dummy text split into a few sentences, but with Emmet you can specify the number of words that should be generated right in the abbreviation.

Example 1: two paragraphs with default lorem ipsum

p*2>lorem

will generate two paragraphs with dummy content.

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, eaque, molestiae saepe aut autem in earum magnam harum enim obcaecati eum pariatur sit suscipit nisi repellat quia a ipsum reiciendis!</p
			>
<p>Ipsum, laudantium, quia suscipit qui officia autem dicta alias explicabo illo quis voluptas corporis eveniet laborum ducimus possimus quas debitis sunt quibusdam libero deserunt. Odit nemo beatae officiis perspiciatis delectus.</p>

Example 2: specifying the number of words

Just add the number after “lorem”. p>lorem10 will generate 10 words and p>lorem50 will generate paragraphs with 50 words.

p>lorem10

will generate a paragraph with 10 words.

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, asperiores.</p>

Example 3: List items with lorem ipsum

This abbreviation will create an unordered list with four items with dummy text and the class of item.

ul.generic-list>lorem8.item*4

Here is the output.

<ul class="generic-list">
	<li class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
	<li class="item">Quis, dolorum blanditiis reiciendis eius facere nulla porro.</li>
	<li class="item">Repellat, animi, nisi quibusdam esse distinctio nostrum blanditiis!</li>
	<li class="item">Neque, eius temporibus itaque nostrum tempore expedita ad?</li>
</ul>

CSS Abbreviations

Emmet has a special CSS resolver that expands such abbreviations into a complete CSS property. For CSS syntax, Emmet has a lot of predefined snippets for properties. Just like HTML, you can expand abbreviations into complete CSS properties.

Here are some examples.

Example 1: Predefined abbreviation

ff

and hit tab. you will get

font-family: ;

Example 2: Abbreviation with value

ff:a

will output the following CSS code.

font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

Example 3: Predefined abbreviation

mr

will output following CSS code.

margin-right: ;

Example 4: Adding default value

mr10

will output following CSS code.

margin-right: 10px;

Example 5: Multiple values To add multiple values use a hypen to separate them:

m10-20

will output following css code.

margin: 10px 20px;

Example 6: Adding a negative value will precede the first value with a hyphen and all the rest with double hyphens

p-10--20

will output following CSS code.

padding: -10px -20px;

Vendor Prefixes

Vendor prefixes are common nowadays to use CSS3 properties. Emmet makes it easy to use vendor prefixes. Moreover, in editors with tab stops support (such as Eclipse, Sublime Text 2, Espresso etc), Emmet will create a linked value placeholder so you can type a property value and it will be automatically placed in all generated properties.

Example 1: Box-sizing

bx

will output following CSS code.

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

Example 2: Border Radius

-bdrs

will output following CSS code.

-webkit-border-radius: ;
-moz-border-radius: ;
border-radius: ;

Example 3: Border Radius

-trf

will output the following CSS code.

-webkit-transform: ;
-moz-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;

Explicit vendor prefixed

If you need to output CSS properties with specified vendor prefixed properties only, you can do it with Emmet. Let’s say you need to output transform property with webkit and moz prefixes only. In this case you can expand the following abbreviation:

Example: Border Radius

-wm-trf

will output the following CSS code.

-webkit-transform: ;
-moz-transform: ;
transform: ;

CSS3 Gradients is a hard-to-write CSS3 feature, I cannot write it myself. I use an online CSS3 generator tools for CSS3 properties. Emmet makes it simple to write CSS3 gradients. Here’s what you need to type and the output you will get.

Example:

div{
	lg(left, #fc0 30%, orange)
}

will output following css code.

div{
	background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.3, #fc0), to(orange));
	background-image: -webkit-linear-gradient(left, #fc0 30%, orange);
	background-image: -moz-linear-gradient(left, #fc0 30%, orange);
	background-image: -o-linear-gradient(left, #fc0 30%, orange);
	background-image: linear-gradient(left, #fc0 30%, orange);
}

You can see I have just used lg for liner gradient and added values. Emmet has turned my abbreviation into complete CSS3 code.

In the fourth and last part of this series, we’ll look at how Emmet handles existing markup and code.

Frequently Asked Questions about Mastering Emmet