Speed Coding with Emmet

01.24.2014
HTML markup speed coding with Emmet plugin

If you're a front-end web developer, there's one thing that you'll have to deal with again and again: lots and lots of markup.

Tags here, tags there, everywhere a tag, tag. It can be an absolute nightmare trying to keep track of what's going on. Even worse, if you're typing it all out, it'll be slow and tedious. Now, what if I told you that you could type a whole page of markup with one line of code? This is where Emmet comes in.

Emmet is plugin for many text editors and IDEs for speeding up how you code. It uses a special set of CSS-like macros that turn into markup.

But instead of just telling you, allow me to show you.

  <h1>This is an awesome title</h1>
<ul>
<li>I am list item No. 1</li>
<li>I am list item No. 2</li>
<li>I am list item No. 3</li>
</ul>

Pretty neat, right? Here are some more things it does to make your coding more productive:

1. Fast Prototyping

When you're prototyping, you want to get your ideas out as fast as possible. Emmet allows you to flush out markup as quickly as possible. Let's see how this could be done for a blog template.

<section>
<article>
<h1>Title 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, nihil, perspiciatis accusamus voluptates beatae quo perferendis. Cupiditate, molestiae, velit, magni ut commodi eius sint modi unde ipsum impedit nam veniam!</p>
</article>
<article>
<h1>Title 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, nihil, perspiciatis accusamus voluptates beatae quo perferendis. Cupiditate, molestiae, velit, magni ut commodi eius sint modi unde ipsum impedit nam veniam!</p>
</article>
<article>
<h1>Title 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, nihil, perspiciatis accusamus voluptates beatae quo perferendis. Cupiditate, molestiae, velit, magni ut commodi eius sint modi unde ipsum impedit nam veniam!</p>
</article>
</section>

2. Dummy Content Generation

Emmet has powerful features like item numbering and literal text so you can have some varying dummy content in your prototypes, instead of copying the same string of text over and over.

<ul>
<li><span id="unique-item-1">For the 1th time, I will not jump over the lazy dog.</span></li>
<li><span id="unique-item-2">For the 2th time, I will not jump over the lazy dog.</span></li>
<li><span id="unique-item-3">For the 3th time, I will not jump over the lazy dog.</span></li>
<li><span id="unique-item-4">For the 4th time, I will not jump over the lazy dog.</span></li>
<li><span id="unique-item-5">For the 5th time, I will not jump over the lazy dog.</span></li>
<li><span id="unique-item-6">For the 6th time, I will not jump over the lazy dog.</span></li>
<li><span id="unique-item-7">For the 7th time, I will not jump over the lazy dog.</span></li>
<li><span id="unique-item-8">For the 8th time, I will not jump over the lazy dog.</span></li>
<li><span id="unique-item-9">For the 9th time, I will not jump over the lazy dog.</span></li>
<li><span id="unique-item-10">For the 10th time, I will not jump over the lazy dog.</span></li>
<li><span id="unique-item-11">For the 11th time, I will not jump over the lazy dog.</span></li>
<li><span id="unique-item-12">For the 12th time, I will not jump over the lazy dog.</span></li>
<li><span id="unique-item-13">For the 13th time, I will not jump over the lazy dog.</span></li>
<li><span id="unique-item-14">For the 14th time, I will not jump over the lazy dog.</span></li>
<li><span id="unique-item-15">For the 15th time, I will not jump over the lazy dog.</span></li>
<li><span id="unique-item-16">For the 16th time, I will not jump over the lazy dog.</span></li>
<li><span id="unique-item-17">For the 17th time, I will not jump over the lazy dog.</span></li>
<li><span id="unique-item-18">For the 18th time, I will not jump over the lazy dog.</span></li>
<li><span id="unique-item-19">For the 19th time, I will not jump over the lazy dog.</span></li>
<li><span id="unique-item-20">For the 20th time, I will not jump over the lazy dog.</span></li>
</ul>

Best part, is that it has a lorem ipsum abbreviation built in :)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, molestias, atque dolores beatae in distinctio inventore quia neque deserunt nulla voluptatem officiis obcaecati porro impedit doloremque qui modi sapiente vel!  

3. It's available everywhere

Emmet has come a long way ever since is started. There are plugins for over 14 text editors so it's very likely that you'll have able to start using it in your favorite editor right away.

sharing link :
category : Development