Zen Coding – How to speed up your markup with Emmet

By Rickard Dahlstrom | Posted Mar 10, 2015 | 7 min. (1338 words)

If you haven’t heard about Zen Coding or Emmet, you’ve probably been writing your markup in the dark. It’s time to put some light to your development workflow. Zen Coding and Emmet help you write your markup more quickly.

In 2008 Vadim Makeev started to write the open source project – Zen Coding, which allows you to transform CSS rules to HTML markup. This project later changed its name to Emmet.

We’ve all been writing markup that feels like it takes ages to write, a lot of tags, rules, classes, ids and text. It takes time and it is so frustrating when a closing tag doesn’t mach a start tag. To write markup character by character takes time. Having a good code-editor makes it much easier. Using Zen Coding makes it a dance.  So how does it work?

CSS roles to HTML markup

It’s beautiful in its structure and I will let this example demonstrate that.

ul.my-list>li.my-list-item*10

This will result in a ul list with with 10 li tags. Each one with given class name.

<ul class="my-list">
	<li class="my-list-item"></li>
	<li class="my-list-item"></li>
	<li class="my-list-item"></li>
	<li class="my-list-item"></li>
	<li class="my-list-item"></li>
	<li class="my-list-item"></li>
	<li class="my-list-item"></li>
	<li class="my-list-item"></li>
	<li class="my-list-item"></li>
	<li class="my-list-item"></li>
</ul>

Easy? Let’s look at one more…

article.my-article>header#my-header>h1+span.my-header-author
// Will give you...
<article class="my-article">
	<header id="my-header">
		<h1></h1>
		<span class="my-header-author"></span>
	</header>
</article>

You are probably now starting to get the Zen coding logic. It pretty much works the way we’re used to doing things with CSS.

  • A . will add a class to the element.
  • A # will add an id to the element.
  • A > will make the right element to a child of the left element.
  • A + will make the right element to a sibling to the left element.
  • A *[number] will loop the element [number] of times.

OMG Zen coding is MAGIC. I want the magic now.

First of all. Calm down, I know it’s exciting.

Zen coding / Emmet is well supported across many code editors since it’s written in Javascript and is easy to implement. Shortcuts are different for each plugin. For example, in Sublime you can put the cursor at the end of the line and hit ctrl+e to apply magic… after you have installed the plugin.

You can find a list of plugins for different text editors at emmet.io/download/.

I can’t find a plugin for my code-editor.

Note that this is NOT all of the existing plugins. Do a Google search and hopefully you will have better luck. According to Microsoft user statistics, there were more than 2 million developers using Visual Studio in the year 2014 – so here’s how to get started with the plugin for Visual Studio 2013.

These are the 4 steps you need to get your magic markup in Visual Studio Emmet 2013.

  1. Install
  2. Restart Visual Studio (After restart you should have a new tab in the top menu)
  3. Write your “css rules” e.g div.hello>div.world
  4. Hit ctr+1 or hit “expand abbreviation” under your new “Emmet” tab
  5. Enjoy your auto generated code.

If you have good tips of plugins that are not in the list please leave a comment.

So let’s dig deeper into the awesomeness

Emmet will expand everything between the start of the line to the cursor. So if you have the cursor in the middle of the line it will only expand from the beginning to the middle.

Let’s write some text…

p{this is some text}
// Will give you...
<p>this is some text</p>

Don’t we all love lorem ipsum but hate to implement it… Not anymore.

lorem15
// Will generate the 15 first word from the ipsum text.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, quibusdam necessitatibus rerum unde cupiditate beatae.

Lorem text can also be repeated within loops like…

p*8>lorem5
// Note that the output is a bit more intelligent then just repeating the same words.
<p>Lorem ipsum dolor sit amet.</p>
<p>Velit, officia excepturi natus alias.</p>
<p>Provident ratione maiores alias reprehenderit.</p>
<p>Odio aliquam enim sapiente sequi.</p>
<p>Accusamus, velit assumenda beatae ratione!</p>
<p>Ipsum, vitae voluptas similique exercitationem.</p>
<p>Nihil autem numquam eveniet incidunt?</p>
<p>Eos quidem non neque quae.</p>

The Syntax is still too long! If you think so you might be a bit too lazy, but fair enough. It’s still possible to do the syntax a bit shorter.

By default Emmet will define a div if no element is defined.

.my-class
// Will give you
<div class="my-class"></div>

In some cases it can be a bit more intelligent as well.

ul>.my-class
// Wow, li inside ul. Well done Emmet 😉
<ul>
 <li class="my-class"></li>
</ul>

We can use the CSS attribute brackets to apply attributes.

img[width=100 height=150]
// Note that scr and alt are automatically added.
<img src="" alt="" width="100" height="150">

Quite quickly you will notice you get greedy and want more. You want to make a block as a sibling to another block. Yes, we’re talking about groups.

article>(header>h1{A headline})+(div.my-container#my-container>{<!-- write some text here -->})+(footer>p>lorem20)
<article>
	<header>
		<h1>A headline</h1>
	</header>
	<div class="my-container" id="my-container"><!-- write some text here --></div>
	<footer>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, nesciunt eveniet amet magnam dolore voluptatibus molestiae voluptate nihil consequuntur possimus.</p>
	</footer>
</article>

Evaluate math expression. Note that there will be another hot key for this action.

32*2+99/99
//Will give you...
65

Auto increment of classes text or content. Note that each dollar sign represents one digit and will be increased for each iteration.

.container>ul>.item$$*10>{this is item number $$}
// or...
.container>ul>(.item$$>{this is item number $$})*10
// will give you...
<div class="container">
  <ul>
    <li class="item01">this is item number 01</li>
    <li class="item02">this is item number 02</li>
    <li class="item03">this is item number 03</li>
    <li class="item04">this is item number 04</li>
    <li class="item05">this is item number 05</li>
    <li class="item06">this is item number 06</li>
    <li class="item07">this is item number 07</li>
    <li class="item08">this is item number 08</li>
    <li class="item09">this is item number 09</li>
    <li class="item10">this is item number 10</li>
  </ul>
</div>

Summary

Emmet is probably the easiest and most powerful developer tool I know. It makes writing markup more fun, even a bit cool. I hope you found this article useful and that it brought some light to your coding. Who wants to code in the dark?

Before I say good bye. Let’s get crazy

body>section.super-heroes>(header.super-hero-header>h1{Who is the ultimate super hero?})+(table.super-hero-table[width=500]>(thead>(tr>td.hero-number-$>{Hero $$})*5)+(tbody>(tr>td.hero-number-$>ul>li{Strength <!-- value -->}+li{Speed <!-- value -->}+li{Money <!-- value -->}+li{Ability to fly <!-- value -->}+li{Fashion point <!-- value -->})*5))+p.hero-description>lorem30+dl>(dt{hero 01}+dd{Spiderman}+dt{Hero 02}+dd{The Hulk}+dt{Hero 03}+dd{Ironman}+dt{hero 04}+dd{Catwoman}+dt{hero 05}+dd{Batman})
<body>
	<section class="super-heroes">
		<header class="super-hero-header">
			<h1>Who is the ultimate super hero?</h1>
		</header>
		<table class="table super-hero-table" width="500">
			<thead>
				<tr>
					<td class="hero-number-1">Hero 01</td>
				</tr>
				<tr>
					<td class="hero-number-2">Hero 02</td>
				</tr>
				<tr>
					<td class="hero-number-3">Hero 03</td>
				</tr>
				<tr>
					<td class="hero-number-4">Hero 04</td>
				</tr>
				<tr>
					<td class="hero-number-5">Hero 05</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td class="hero-number-1">
						<ul>
							<li>Strength <!-- value --></li>
							<li>Speed <!-- value --></li>
							<li>Money <!-- value --></li>
							<li>Ability to fly <!-- value --></li>
							<li>Fashion point <!-- value --></li>
						</ul>
					</td>
				</tr>
				<tr>
					<td class="hero-number-2">
						<ul>
							<li>Strength <!-- value --></li>
							<li>Speed <!-- value --></li>
							<li>Money <!-- value --></li>
							<li>Ability to fly <!-- value --></li>
							<li>Fashion point <!-- value --></li>
						</ul>
					</td>
				</tr>
				<tr>
					<td class="hero-number-3">
						<ul>
							<li>Strength <!-- value --></li>
							<li>Speed <!-- value --></li>
							<li>Money <!-- value --></li>
							<li>Ability to fly <!-- value --></li>
							<li>Fashion point <!-- value --></li>
						</ul>
					</td>
				</tr>
				<tr>
					<td class="hero-number-4">
						<ul>
							<li>Strength <!-- value --></li>
							<li>Speed <!-- value --></li>
							<li>Money <!-- value --></li>
							<li>Ability to fly <!-- value --></li>
							<li>Fashion point <!-- value --></li>
						</ul>
					</td>
				</tr>
				<tr>
					<td class="hero-number-5">
						<ul>
							<li>Strength <!-- value --></li>
							<li>Speed <!-- value --></li>
							<li>Money <!-- value --></li>
							<li>Ability to fly <!-- value --></li>
							<li>Fashion point <!-- value --></li>
						</ul>
					</td>
				</tr>
			</tbody>
		</table>
		<p class="hero-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, sed ea blanditiis deserunt saepe praesentium repellat voluptatem obcaecati ipsa cupiditate totam nesciunt facilis pariatur eligendi fugiat expedita laboriosam nemo voluptatibus.
			<dl>
				<dt>hero 01</dt>
				<dd>Spiderman</dd>
				<dt>Hero 02</dt>
				<dd>The Hulk</dd>
				<dt>Hero 03</dt>
				<dd>Ironman</dd>
				<dt>hero 04</dt>
				<dd>Catwoman</dd>
				<dt>hero 05</dt>
				<dd>Batman</dd>
			</dl>
		</p>
	</section>
</body>

This helps you build better software, but do you know how it performs when in the hands of your users? For that you might want to consider something like this.