So I was sitting at work, wondering how I ended up doing some email template that had to be written in pure HTML. No HAML allowed. And than, my co-worker showed me Emmet. When I looked at it, I almost cried thinking about all these hours I used to spend on writing full-blown HTML code.

But lest's rewind.

How it all started

So few years back I started coding (HTML and PHP). Those were some hard times, as many of front-developers would probably recall. Later on I discovered HAML and my life has changed. But there was one problem. I was working on Windows and Linux symultaniously. So I could use HAML syntax but only in RAILS projects which were hosted on virtual machine. But as for the projects I was doing on Windows (due to many reasons) I was stuck with the old ways. I could use SASS, but it was only half of success, besides, even on LINUX there was a small problem when long lists or multiple elements had to be created.

I admit it - I am lazy. If I can cut down my typing even by 20% - I will do everything I can to achieve it.

Enlightenment

So I found emmet. Many of the programmers said "big whoop, you already had HAML, so what is the big difference". But they do not know the struggle of creating a list of 10 elements, and having to write it down, or use ctrl+c+v mechanism. I do not even start to describe the horror of creating HTML files for email marketing purposes.

The tool itself

So the authors are very modest and say:

Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow

And in general - they are right. Emmet lets you write css-like code in order to create full-blown HTML or nice HAML. It also allows you to create CSS in a faster way, as it offers you many convenient shortcuts.

And suprisingly, there is nothing more to it. It is plain and simple, but what could we demand more?

Examples

OK, enough talking, let's see some examples

Imagine you have to create a typical menu syntax - in HTML.

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

will convert into

<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <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>

Amazing, huh?

Every > sign makes you go deeper. Every + creates a sibling element. But what happens if you decide to go up?

div+div>p>span+em^bq

compiles to

<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

Grouping elements?? No problem:

div>(header>ul>li*2>a)+footer>p

will give you

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

Custom attributes?

td[title="Hello world!" colspan=3]

I dare you.

<td title="Hello world!" colspan="3"></td>

And one of the best - Lorem Ipsum

p*4>lorem

Try it, and see what happens.

HAML user?

#content>p.title|haml

Tab key

#content
    %p.title

That is cute, but what about CSS?

Yeah, actually converting css-like syntax seems like a stupid idea for creating css. But there is something that Emmet Creators have to offer.

Let's say you need your favourite margin: 10px 20px 10px 10px; syntax.

m10-20-10-10

And youre done.

But wait, what about em and %?

Type p,e,x to find out. Each of them expands into other unit.

Color values? Absolutely sir!

#1 → #111111
#e0 → #e0e0e0
#fc0 → #ffcc00

And at last but not at least - that horrible !important selector.

p10p!+m10e!

will give you

padding: 10px !important;
margin: 10em !important;

HTML, HAML, CSS and ....ACTIONS

Besides HTML/HAML and CSS snippets there are also some pre-defined actions. Since they are harder to describe here I will jest mention few of them and suggest visiting "docs" section on emmet.io. Sample actions:

CTRL+/ will comment selected tag out

CTRL+K will remove the selected tag but will not remove its content

Shift+Ctrl+U will update width and height attributes in selected img (HTML) or url (CSS) tag

That's all folks

I could give you countless number of examples, but the best way to know any tool is to use it, so dig in at: Emmet.IO