Jordan Moore UX & Interaction Designer

Emmet’s hidden power features

July 10, 2014 in Coding

Emmet (formerly known as Zen Coding) is a plugin for text editors helping you create CSS and HTML faster by using abbreviations to write common values saving ridiculous amounts of time along the way.

There are heaps of really useful features alongside Emmet’s primary text-expanding function. Here are a few of the hidden gems that I frequently use when coding1.

Inline Calculation

Emmet has a built-in calculator which allows you to solve equations directly in your code. I use this daily to solve EM values in CSS, particularly for nested EM values simply by pressing2Cmd Shift Y beside an equation like: 24/16 (desired pixel value/base pixel value).

You can also chain this with abbreviations, so typing: mb24/16 and pressing Cmd Shift Y then tab would output: margin-bottom: 1.5em.

Jump to Matching Pair

Sometimes when coding HTML I might find a closing tag and it’s not always quick and easy to trace back to where the opening tag exists. Pressing Ctrl Shift T when the cursor is in the closing (or opening) tag jumps to the opening (or closing) tag pair.

Code comments

To prevent running into the situation in the previous tip, I recommend placing comments beside your closing tags. But writing the class name of the element for a second time and wrapping it in comments can take up time, and it’s extra effort that won’t be beneficial until you run into scenarios where you need to revisit that code, so it’s often forgotten about or left out completely.

Thankfully Emmet makes it easier to write comments beneath closing tags by adding a tiny snippet to the end of an abbreviation. Typing: .container>ul>li*5>a|c expands to:

<div class="container">
    <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>
</div>
<!-- /.container -->

So writing comments where elements close is as easy as writing |c.

Convert image to Data URI

One of the most underused features of Emmet is it’s built-in ability to convert images to data:URI schemes. Using a data:URI instead of linking to an external image saves an extra HTTP request which ultimately improves the performance of your site by reducing latency.

To convert an image to a data:URI, place your cursor in the image tag and press Ctrl Shift D.


Emmet can be as powerful as you want it to be. It’s worth using for its text-expansion capabilities alone saving huge amounts of coding time, but beyond that lies a very powerful suite of development tools.


  1. This article assumes you are familiar with Emmet. If you haven’t tried it out yet you absolutely must

  2. The keyboard shortcuts shown here work for my Mac installation of Sublime Text and Emmet. From what I can tell they may differ between installations, Windows installs will obviously have different shortcuts too. Bring up the Go To Anything menu and start typing the name of the command you wish to use to see the shortcut key. 

Biography

I make cool things for the web for Eyekiller most days, the rest of the time is spent with my family and cycling Ireland's hills and coasts.

My interests lie in the areas of responsive web design and helping create good typography for the web.

Ambassadors