Emmet (formerly Zen Coding) is best described as a set of macros and keyboard shortcuts for rapid web development. Available as a free download and plugin for over a dozen popular editors, Emmet potentially doubles the production speed of web pages if used consistently. In this article, I’ll take you through installing, using and customizing Emmet to gain maximum results.

Most modern code editors already have built in macros of one kind or another, auto-closing tags and pre-formatting them with typical attributes; Emmet just takes that several steps further. It also has the advantage of being consistent across all platforms and editors: rather than learning a new set of shortcuts when you move from one application to another, you can consistently use Emmet syntax for the quick generation of code.

Installation

Emmet is supported on more than a dozen different editors, with slightly different installation for each; consult the documentation for your editor of choice.

Using Emmet For Production

Once Emmet is installed, it’s good to go. Aside from the easy-to-remember shortcut syntax, you have to keep just two things in mind:

• Adding spaces in Emmet syntax will cause shortcuts to fail
• You must use the appropriate keyboard shortcut to expand Emmet syntax after you complete typing the code (Control-E)

All right. Let’s say that you’ve started a page with the boilerplate or template of your choice. First, you want to work on the navigation. Typically this would involve typing out a series of nested tags: in HTML5, a <nav> element, <ul> and series of <li> tags with links inside them. With Emmet, we can just type this:

nav>a*5

Which, after pressing Control + E, Emmet magically expands to:

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

Pretty neat, right?  Emmet intelligently uses CSS-style selectors in your HTML code to generate nested elements, with the addition of multipliers for recursion.

You can use the same technique to generate tables very quickly:

table>tr*3>td*5

… which will create a three row, five column table.

But wait, we can do better! By grouping elements in Emmet syntax, we can nest tags together:

section>(article*2>>h2+p+a{Read more…})

Expands to:

<section>
	<article>
		<p></p>
		<a href=""></a>
       </article>
	<article>
		<p></p>
		<a href=""></a>
       </article>

Or try this:

table>(thead>tr>th*5)(tbody>tr>td*5)

…which will produce a table with a header and data row.

We can also use the equivalent of the CSS adjacent sibling selector to create a series of elements one after the other:

header+main+footer

Creates:

<header></header>
<main></main>
<footer></footer>

There are many more possible combinations, but the bottom line is this: you can create the base markup for a page in just a few keystrokes, rather than laboriously entering tags.

Generating filler content

You can use Emmet to quickly generate filter content. Simply expand the keywords lorem or ipsum to create lorem ipsum filler text. Braces denote specialized filler text: for example, to fill a series of null links with the word “Link”:

nav>a[href=#]{Link})*5

Creates:

<nav>
	<a href="#">Link</a>
	<a href="#">Link</a>
	<a href="#">Link</a>
	<a href="#">Link</a>
	<a href="#">Link</a>
</nav>

CSS For The Super-Lazy

If you’re working in a stylesheet, Emmet can make life much easier. For example, rather than typing:

margin: 2rem;

With Emmet installed, we can type:

m2r

Which, after applying the Emmet keyboard combo, expands to the same thing.

There are hundreds of such shortcuts for Emmet. The nice part is that you don’t have to use them all at once, or even any of them: the plugin will remain inactive until you use a shortcut and call on it.

Select tags rather than text

Selection options in many IDEs is more akin to word processors than the needs of code editors. Emmet boasts of number of features to make selection of HTML and CSS content easier: rather than gripping and moving a mouse, a few repeated keystrokes can select units of code for editing, copying or deletion.

What’s the difference between Emmet and pre-processors like SASS?

Pre-processors and frameworks map to a target language, but with one important difference: in a pre-processor, the original code is kept, and interpreted/expanded only at runtime. In other words, you work on a SASS document as SASS: it doesn’t automagically expand to CSS as you type. This provides some advantages: it’s easier to go back to the beginning and make a small alteration to the original shortcut code that produces sigificant changes to the output. This power usually comes with some added complication and performance issues.

It might be fair to think of Emmet as a gateway to pre-processors: a way of abstracting the creation of markup and CSS without the more complex setup demanded by something like SASS.

Conclusion

After working in Emmet for some time, I can’t believe I ever lived without it. Emmet’s macros are not a shortcut for learning HTML or CSS: you still have to go through the process of understanding what the languages are, and their syntax. But if you’ve already been coding for a year or so and want to increase your efficiency significantly without battling a learning curve, you can easily grasp the basics of Emmet from the excellent online documentation in an hour or two. After that point, it’s just a question of using the new shortcuts to dramatically cut your time in delivering new code.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.