Emmet made me fall back in love with web development

28 July 2015, by

Emmet is an HTML generation plugin that is available for most notable editors/IDEs.

It has a syntax that is designed to be quick to write rather than easy to read. This means you can type an abbreviated expression such as…

#errorModal.modal.fade>.modal-dialog>.modal-content>(.modal-header>h4{Header Text})+.modal-body{Body text.}+(.modal-footer>btn:b.footer-button{Button $}*3)

…and then hit the appropriate key to expand it like so:

<div id="errorModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>Header Text</h4>
            <div class="modal-body">Body text.</div>
            <div class="modal-footer">
                <button type="button" class="footer-button">Button 1</button>
                <button type="button" class="footer-button">Button 2</button>
                <button type="button" class="footer-button">Button 3</button>

The former may look nasty (particularly without syntax highlighting), but it’s pretty easy to write. In my experience Emmet abbreviations are consistently quicker to type than the equivalent HTML, even with an IDE to help complete it. It also has the advantage of being written in a largely linear fashion, since you aren’t closing tags.

The core components of an Emmet abbreviation are as follows:

  • tagName

    This is generally expanded into <tagName></tagName>, though there are a multitude of more intelligent abbreviations such as link expanding to <link rel="stylesheet" href=""/> and link:css expanding to <link rel="stylesheet" href="style.css"/>.

  • .my-class

    Placed on its own, this will expand into <div class="my-class"></div>. Placed after a tag name, it will expand into <tagName class="myClass"></tagName>. The #id abbreviation behaves similarly, expanding into a div or tag with the given id attribute.

  • >, +, ^

    Step into a child tag, across to a sibling or back out to a parent respectively.

  • *, $

    Iteration. *n repeats the previous element n times, $ within the repeated abbreviation is replaced with the number of the current iteration. As such, .my-class$*3 expands to:

    <div class="my-class1"></div>
    <div class="my-class2"></div>
    <div class="my-class3"></div>

The above, combined with square brackets for attributes and braces for text, allow you to rapidly express your desired structure.

It’s more trouble than it’s worth to try and write the entire file as one giant expression, but it’s good for getting a rough skeleton onto the page that you can then tweak and fill in. Generally speaking, if you’re having to stop and think for more than a few seconds then it’s worth expanding what you’ve got so far and taking stock of your surroundings. The fact that it’s simple text replacement means you can construct your abbreviations piecemeal, writing one, expanding it, looking at the results and then using another to fill in further detail where appropriate. Most editors also give you the ability to wrap existing HTML elements with an abbreviation, along with similar structural changes.

As someone who had previously sworn off web dev as a fever dream of boilerplate and awkward hacks, it’s tools like Emmet (alongside modern CSS/JS frameworks) that have made me fall in love with it all over again.

Categories: Technical


Leave a Reply

* Mandatory fields

2 + four =

Submit Comment