Front-End Developer

← Back to Blog

Why Emmet Is Such a Great Tool For Web Developers

We all know someone who gets way too excited by tooling. They have a ton of browser extensions running, another bunch of packages for their text editor, they’ve customised their keyboard for shortcuts and created aliases for common shell commands. You look at them and think – do you really need all this?

Well…I’m that guy.

I enjoy trying out new tools and extensions to try to improve my workflow but most of the time it’s the same old story. I’ll use something for a week or two proclaiming it’s the best thing since sliced bread and then I’ll end up going back to the old way of working and forget it every existed.

Once every few months I’ll have a bit of a clean-up and get rid of all of these tools that I’m not using anymore, but there’s one that’s stood strong. Time and time again it’s proven its worthiness – this is Emmet.

Emmet is a library which allows you to write HTML and CSS more quickly. By using built-in snippets you can rapidly build up webpages without the need for copy/pasting or writing out things longhand.

Let’s look at some examples.

Using Emmet with HTML

Emmet has a list of abbreviations which allows you to write complex markup quickly. You simple type the snippet and hit tab to expand. For example:

ul>li*5

will output:

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

Classes and IDs can be added to elements by using the usual CSS selectors. Emmet also allows you to chain attributes for multiple classes.

article.post.single-post

will output:

<article class="post single-post"></article>

You can add content between HTML tags by putting it in curly braces:

h1{Post Title}

will output:

<h1>Post Title</h1>

Emmet also has a built in Lorem Ipsum generator so you can create dummy text on demand. The following example produces 4 paragraphs with 15 words each.

p*4>lorem15

will output:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia alias pariatur, quaerat ratione temporibus, aliquid.</p>
<p>Quam culpa blanditiis impedit ad, accusantium dolorem aspernatur inventore laudantium quibusdam dolor explicabo, accusamus laborum!</p>
<p>Quis alias dolorum labore doloremque accusamus nulla voluptate ea, minus, sapiente quidem voluptatem porro a.</p>
<p>Reprehenderit, nihil, animi quidem alias earum molestias praesentium aliquam non ex, ullam fugiat, id? Quidem.</p>

Using Emmet with CSS

Emmet also supplies us with a list of abbreviations to use with CSS. These shortcuts are designed to be intuitive and use a fuzzy search model to try to guess what you might be expecting.

m:20px
pt:50%
ov:h

will output:

margin: 20px;
padding-top: 50%;
overflow: hidden;

Advanced Emmet

Emmet allows for you to customise the experience to suit your needs. You can set up new snippets, change the default behaviour and create different profiles for the project you’re working on.

In short, I think the real reason I like Emmet is that it never feels like it’s in the way. You can use it when you need it and ignore it when you don’t. For these reasons, I can see it being part of my development toolbox for a long time to come.