Emmet: Speed Up Your Markup

As a WordPress Engineer at Inpsyde, I not only write PHP code, but also work on the front end. The last time that I was involved in the development of a complete and complex theme, however, was more than two years ago.

Now, doing the React For Beginners course by Wes Bos—a course that I just can’t recommend enough—I learned (again) of something easy to use, and at the same time something very powerful: Emmet.

In case you are thinking “Wait. Emmet? Isn’t that one of these Twilight vampire guys?”: sorry, wrong blog. 😉

A Toolkit for Web Developers

In its core, Emmet is a combination of a parser for a specific kind of abbreviation syntax, and a generator for markup, CSS code, and even XSL, respectively. These abbreviations are heavily based on (a subset of) CSS selectors, and thus very easy to get used to for almost any front-end developer.

Getting Started

In order to use Emmet in your IDE (or text editor) of choice, you just have to install a plugin. In case you are using PhpStorm (or WebStorm): no need to do anything. The according plugin is bundled with these tools already.

Note: Since I am using PhpStorm, the following descriptions and screenshots are specific to this tool and the according plugin. I am pretty sure, though, that using most of the other plugins doesn’t vary too much.

Depending on your editor and the plugin, respectively, there might be several options that you either have to or can set as you see fit.

Using Emmet

Once activated (and enabled), you can just go ahead and type abbreviations and expand them. In PhpStorm, this is done with the TAB key, although this can easily be configured otherwise.

Depending on where you are (i.e., in what type of file, and in what scope), one and the same abbreviation might generate (slightly) different code. But let’s have a look at that by means of some examples.

Basic Usage

Since the official Emmet documentation is pretty comprehensive, I won’t provide a full coverage of all the things you can do. The most basic thing with Emmet is expanding an HTML tag (or element). This is not limited to existing tags, but you can use any valid string and expand it. Emmet will provide you with appropriate attributes that you just have to fill (or remove, if you don’t want/need them).

HTML Tags

So let’s expand our first few tags. In some HTML context (e.g., in a real HTML file, or in the HTML scope of a PHP file), we type div, and then expand by using TAB. This will result in the following markup:

<div></div>

Cool, but pretty unspectacular. All we got is an empty <div /> tag.

Since this should also work with custom tags, how about expanding awesome then? 🙂

<awesome></awesome>

Great! Awesome! 😀 That worked, too. But still, this is only an empty tag.

Let’s try another tag, with a mandatory attribute this time. Expanding form gives us the following, with | being the cursor waiting for us to fill in the form action:

<form action="|"></form>

Aha! Now we generated an HTML tag together with an attribute. Can we drive this any further?

When we expand textarea, we get the following, fairly complete, markup:

<textarea name="|" id="" cols="30" rows="10"></textarea>

TABbing through the attributes, we can fill in new values for the blank ones as well as overwrite any default values already filled in.

Nested HTML Tags

So, can we only use this for single tags? No, of course not. Emmet wouldn’t be that great of a help then, would it?

Emmet lends the two operators, > and +, from CSS to designate (direct) children and siblings, respectively. In addition, there is the climb-up operator, ^, that allows you to climb up the tree one level. Of course, this is not limited to only once per operator. You can nest and mix these ad infinitum.

Using all of these in combination could look like this:

table>tr>td+td^^hr

And it will result in the following markup:

<table>
  <tr>
    <td>|</td>
    <td></td>
  </tr>
</table>
<hr>

Now that’s something, right? 🙂

HTML Tag Attributes

Emmet, of course, not only allows to generate tags (with mandatory as well as suggested attributes), but it also allows to explicitly specify attributes. The most common ones will definitely be the class and id attributes, so Emmet, again, makes use of what we know from CSS. In order to generate tags with a specific class or ID, you just have to use the CSS notation, that is: .class-with-leading-dot and #id-with-leading-hash. Expanding button.primary#submit will therefore generate the following markup:

<button class="primary" id="submit">|</button>

Depending on your IDE (and thus plugin), the order of class and ID does matter, but only in that the real HTML attributes will be provided in the exact same order.

For various tag—attribute—value combinations, there is another attribute (or in that case: tag) syntax consisting of the name of a tag followed by a colon, :, and then some value of a predefined set. For example, several input types can be generated that way. The following:

input:url+input:number+input:file

renders the expected markup:

<input type="url" name="|" id=""><input type="number" name="" id=""><input type="file" name="" id="">

Further examples are the two common form types: form:get and form:post.

Any other attribute, even custom ones, can be generated using the square-bracket syntax, like known from CSS:

input[type="url" foo="bar"]

The above results in the following:

<input type="url" foo="bar">

As you can see, when using the square-bracket syntax, you only get what you provide.

Text

In case you want to specify text, you can do so by putting it inside curly braces, { and }, directly after a tag abbreviation. If the according tag happens to be a self-closing one, the text will be placed after the tag. For a non-self-closing tag (i.e., an element with a start and an end tag), the text goes inside of the element.

input{Some text, man!}+p.description{And a few words more here...}

The abbreviation from above will yield this markup:

<input type="text">Some text, man!<p class="description">And a few words more here...</p>

More Advanced Usage

All of the above is already really cool, right? But there are lots of further possibilities included in Emmet. Let’s have a look at some of them, shall we?

Multiplication

Sometimes, generating a tree of parent—child as well as sibling relationships isn’t good enough. I mean, it could be, but what if you want to generate something where particular parts repeat one tag? Emmet has the multiplication feature for just these situations. Putting an asterisk, *, followed by some positive integer right after a tag will render the abbreviation multiple times, according to the given number.

So, form>input*3+button:submit will generate the following markup:

<form action="|"><input type="text"><input type="text"><input type="text">
  <button type="submit"></button>
</form>

Cool! We got three input elements in one go. But what if we want to wrap each of these in an individual label?

Let’s try straightforward form>label>input*3+button:submit:

<form action="|"><label for=""><input type="text"><input type="text"><input type="text">
  <button type="submit"></button>
</label></form>

Hm, that is not exactly what we wanted, right? Thing is that the multiplication operator only works on the single entity left from it. And in our example from above that is just the input.

We only have a single label, so maybe we have to multiply the label instead of the input? So we try form>label*3>input+button:submit:

<form action="|"><label for=""><input type="text">
  <button type="submit"></button>
</label><label for=""><input type="text">
  <button type="submit"></button>
</label><label for=""><input type="text">
  <button type="submit"></button>
</label></form>

Well, this is also not it. We now do have three inputs, each wrapped in an individual label. Unfortunately, we also have three submit buttons. But don’t you worry, Emmet has got you covered: grouping to the rescue!

By wrapping an arbitrary abbreviation in parentheses, ( and ), Emmet is able to multiply all of what’s inside that group. So, in order to get this right, we have to do it like so:

form>(label>input)*3+button:submit

The above finally generates our desired markup:

<form action="|"><label for=""><input type="text"></label><label for=""><input type="text"></label><label for=""><input type="text"></label>
  <button type="submit"></button>
</form>

Lorem Ipsum

Care for some Lorem Ipsum? Well, Emmet also offers that. 😀

Expanding lorem will render the following 30-words Lorem Ipsum plain text:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores autem debitis dolorum ea esse exercitationem facilis, fuga fugiat ipsum laboriosam molestias officia quasi quo quos repellendus sit voluptatibus! Hic, porro!

Handy.

In case this is too short or too long, you can put a positive integer right after that to limit the text to the exact number of words. While lorem1 will just render the first word, lorem8 will render the first sentence, each followed by a full stop.

Of course, this can be combined with all we learned before.

form>(label>input:radio+lorem8)*3

The above will produce this meaningful lorem radio form:

<form action="|"><label for=""><input type="radio" name="" id="">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</label><label for=""><input type="radio" name="" id="">Ex inventore magnam obcaecati sapiente soluta totam velit!</label><label for=""><input type="radio" name="" id="">Ad enim nemo quas quis. Accusamus, eaque molestiae?</label></form>

Aliases

For quite a few commonly used abbreviations, there is a shorter alias.

Want to generate an HTML5-compliant website skeleton? Just expand !:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

</body>
</html>

How about a picture element with source and fallback image? Just expand pic+:

<picture>
  <source srcset="|">
  <img src="" alt="">
</picture>

Context-awareness

Like mentioned before, the resulting code of an abbreviation depends on the context, which is basically the current filetype and scope.

Say, you type strong.emmet{Emmet}, and then expand. If you happen to be in an HTML context, the resulting markup will be the following:

<strong class="emmet">Emmet</strong>

In a JavaScript file, however, where you write JSX, the generated code will look like so:

<strong className="emmet">Emmet</strong>

See how .emmet turned into className="emmet" (instead of class="emmet")? This is because class is something like a reserved keyword in JSX, and className is the attribute that you would be using. Emmet is smart enough to figure this out, and you can just stick with your well-known CSS-style class selector. Cool!

Note: depending on your IDE, you might have to enable JSX support. In PhpStorm, for example, you have to set the JavaScript language version to React JSX or Flow (or JSX Harmony, in older versions).

CSS Code

Emmet can not only be used to generate HTML markup, but also CSS code (as well as XSL, which I will not cover here).

Basic Usage

Just like with HTML, Emmet can generate a single CSS rule by using the name (or better an abbreviation) and the value (or an abbreviation as well).

Expanding margin:10em will render margin: 10em;. Wow. We saved two characters.

So, how about  m10e then? Way better, right? 🙂

Of course, you can also provide multiple values at the same time: m1e2p3r4. This works because the unit indicators (e.g., e for em) clearly separate one value from another. If that is not the case, you have to separate individual values with a dash, -. For example, like so: m1-2-3-4.

And just because expanding rule by rule is not as effective as can be, Emmet allows to concatenate CSS rules by putting a plus in between: m0-a+p4.

Have someting important to say? 😉 Just put an exclamation mark, !, at the end of a rule abbreviation to make it important (e.g., m0-a!).

Vendor Prefixes

Another very nice thing is the built-in awareness of vendor prefixes. Just start a rule with a leading dash, -.

The super-short abbreviation -ts0-1-2#3 will result in the following CSS rule set:

-webkit-text-shadow: 0 1px 2px #333;
-moz-text-shadow: 0 1px 2px #333;
-ms-text-shadow: 0 1px 2px #333;
-o-text-shadow: 0 1px 2px #333;
text-shadow: 0 1px 2px #333;

But Wait, There’s More

Writing new markup or CSS code surely is something that we do a lot as a web developer. But we also need to edit existing code. And that’s where Actions come in handy.

Need to do some post-processing? Want to escape data? Or render according to some specific format? Have a look at Filters then.

Also: lots of Emmet’s inner workings can be customized! Have a look at that too, if you feel the need to adapt or extend things.

Since all of this is way too much for a single post, which actually only should make people aware of Emmet, I only linked to the last three items without handling them here. I hope you are okay with that. 🙂

Lost?

Yes, I know, that is quite a bit. To get started real quick (and also to look things up later on), there is this cool Cheat Sheet that you definitely should check out!

And You?

Did you already know Emmet?

If so, (what) are you using it (for)?

What do you like the most?

Do you have some cool example you would like to share?