Introduction

Many text editors have their own way of allowing developers to code faster such as; keyboard shortcuts, snippets and auto complete, to name a few. Emmet takes a different approach to snippets and completely changes the way we write code, by typing just an abbreviation and pressing tab Emmet will build the rest of the snippet for you cutting down on the time spent writing out the entire snippet. The plan of this blog post is to introduce you to the art of Emmet and familiarize yourself with some of the techniques, abbreviations and operators which will increase your productivity.

The abbreviation

Emmet offers a whole range of abbreviations for you to use, the more you can familiarize yourself with these the quicker you can write code. Simple right? Well like most things there is a learning curve. The first thing to go over is the use of abbreviations and how and when to use certain operators.

Here’s an example of an abbreviation:

#page>div.logo+ul#nav>li*5>a{Item $}

And here is the output:

<div id="page">
 <div class="logo"></div>
 <ul id="nav">
 <li><a href="">Item 1</a></li>
 <li><a href="">Item 2</a></li>
 <li><a href="">Item 3</a></li>
 <li><a href="">Item 4</a></li>
 <li><a href="">Item 5</a></li>
</ul>
</div>

Between where we specify elements we have what are called nesting operators, these operators specify where we position the next element.
Let’s just run through that last abbreviation a section at a time.

#page – This generates a div with an id of page notice the ‘#’ to indicate an ID.
> – This allows you to nest the next element in the previous.
div.logo – This creates a div with a class of logo notice the ‘.’ to indicate a class
+ – This allows you to create a sibling element.
#nav – Create a div with an ID of nav
a – create an anchor element
{Item $} – enter the content for the previous element, the $ is the index

you can find out more about nesting operators here.

If you want to check out more operators or just get stuck and need reminding Emmet has a cheat sheet here.

Lorem ipsum

One particular operator which I have found particularly helpful is lorem ipsum which generates random content on the fly very useful when the content hasn’t been signed off. Going to the lorem ipsum website coping and pasting content can be repetitive. Emmet’s abbreviation for this is lorem or lipsum you can assign an element to lorem ipsum like so p*4>lorem this will generate four paragraphs with random lorem ipsum. This is also possible with lists as shown below:

ul.generic-list>lorem10.item*4

<ul class="generic-list">
    <li class="item">Lorem ipsum dolor sit amet, elit. Nam vero.</li>
    <li class="item">Laboriosam quaerat nam minus similique illum!</li>
    <li class="item">Incidunt vitae nostrum aliquid dolorum veritatis dicta!</li>
    <li class="item">Tenetur laborum porro sint quas soluta!</li>
</ul>

Available Editors