Emmet Emissary

Emmet didn’t come naturally to me. My favourite YouTube codey stars and Emmet emissaries use it and without viewing their keyboard strokes I was left eager and still confused. 

What’s Emmet?

I’ll let the Emmet website explain:

“…most text editors out there allow you to store and re-use commonly used code chunks, called “snippets”. While snippets are a good way to boost your productivity, all implementations have common pitfalls: you have to define the snippet first and you can’t extend them in runtime.

Emmet takes the snippets idea to a whole new level: you can type CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation. Emmet is developed and optimised for web-developers whose workflow depends on HTML/XML and CSS, but can be used with programming languages too.

Learning Emmet

I admit some trouble employing Emmet and seemed to miss how to execute it. 

Key Strokes

With thanks to Kevin Powell, I now know Microsoft’s Visual Basic Code (VBC) editor executes emmet strings on Return (Enter) or Tab keys and Adobe’s Dreamweaver uses Tab.

Cheat Sheet

Emmet’s Cheat Sheet helps explain the syntax and concept. The following may help too.

<!--Emmet-->
p{lorem*4}
<!--HTML-->
<p>Lorem ipsum non declosat.</p>

<!--Emmet-->
img[alt="headline"]
<!--HTML-->
<img alt="headline">

<!--Emmet-->
img[alt="headline" width="120" height="40"]
<!--HTML-->
<img alt="headline" width="120" height="40">

<!--Emmet-->
h2{Main Title}
<!--HTML-->
<h2>Main Title</h2>

<!--Emmet-->
h2+p
<!--HTML-->
<h2></h2>
<p></p>

<!--Emmet-->
ol>li+li
<!--HTML-->
<ol>
  <li></li>
  <li></li>
</ol>

<!--Emmet-->
ol>li*4
<!--HTML-->
<ol>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>

<!--Emmet-->
.container>p*2^h3
<!--HTML-->
<div class="container">
<p></p>
<p></p>
</div>
<h3></h3>

<!--Emmet-->
h2#main{Headline Two}
<!--HTML-->
<h2 id="main">Headline Two</h2>

<!--Emmet-->
h2.main{Headline Two}
<!--HTML-->
<h2 class="main">Headline Two</h2>

<!--Emmet-->
p{Paragraph number $}*3
<!--HTML-->
<p>Paragraph number 1</p>
<p>Paragraph number 2</p>
<p>Paragraph number 3</p>

Capabilities

After studying cheat sheets I’m on my way to Emmet competence if you forgive my crazy experiments with what we can chain together. I got excited and created the example in the following figure. Pretty neat, huh?

header#header>a.skiplink[href="#main"]{Skip to main content}+div#noscript>p{Please enable JavaScript to enjoy this site's best features}^nav#sitenav[aria-describedby="sitenav-headline"]>h2[aria-hidden="true"]#sitenav-headline.invisible{Headline 2}+ol>(li>a.current[aria-current="page" data-link="0"]>img[alt="Homepage" width="120" height="40"])+li*4>a[data-link="$"]{Page link}

<header id="header">
    <a href="#main" class="skiplink">Skip to main content</a>
    <div id="noscript">
        <p>Please enable JavaScript to enjoy this site's best features</p>
    </div>
    <nav id="sitenav" aria-describedby="sitenav-headline">
        <h2 aria-hidden="true" id="sitenav-headline" class="invisible">Headline 2</h2>
        <ol>
            <li><a href="" class="current" aria-current="page" data-link="0"><img src="" alt="Homepage" width="120" height="40"></a></li>
            <li><a href="" data-link="1">Page link</a></li>
            <li><a href="" data-link="2">Page link</a></li>
            <li><a href="" data-link="3">Page link</a></li>
            <li><a href="" data-link="4">Page link</a></li>
        </ol>
    </nav>
</header>

Keyboard Shortcut

When you have pressed Tab and your HTML displays, your cursor will default to the snippet’s first empty attribute ready to start typing. Press Tab again and the cursor skips to the next empty attribute. I find this useful when I remember to do it: my mouse-hand has over 25 years’ of learning to undo. 

Snippets and Emmet

As a newbie, my opinion is that Emmet is less effort to use for everyday code blocks than locating and importing snippets from the Dreamweaver snippet library. I still like to ‘craft’ my HTML by hand and illogically finding and inserting snippets can feel like more work.

As the Emmet website claims, it is also useful for crafting contextual code. Once I get the hang of adding copy text, attributes, and values I am sure I’ll be hooked.

There remains space for snippets—those less commonly used template blocks where thinking through the Emmet shorthand on the fly can take longer than typing out the vanilla HTML or inserting a snippet of Emmet.

Pick the battles you can win.

<!--Emmet-->
p{This is how we add an}>abbr[title="abbreviation"]{abbr}+{ within a paragraph.}

<!--HTML-->
<p>This is how we add an<abbr title="abbreviation">abbr</abbr> within a paragraph.</p>

<!--Emmet-->
fig>figc{Example Table}+table>thead>th*3^tbody+tr*3>td*3

<!--HTML-->
<figure>
    <figcaption>Example Table</figcaption>
    <table>
        <thead>
            <th></th>
            <th></th>
            <th></th>
        </thead>
        <tbody></tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</figure>

Emmet CSS? Yes!

Yes. There’s Emmet for CSS, too. That’s cool and so many shortcodes to learn. We can chain CSS Emmet codes together and it quickly gets complicated and confused. Here’s where CSS snippets may well beat Emmet?

Learn more from Kevin Powell’s video, Write CSS 10x faster with Emmet.​

Any Tips?

Yes. Don’t panic when your Emmet-induced HTML throws a validation error!

We can add element attributes and values such as ARIA, classes, ids, and data, and not URLs. These and other empty attributes will validate as errors. That’s no bad thing.

Add your own tip and trick in the comments.