Emmet.io is an amazing plugin that once mastered can literally cut your coding time in half.

Emmet.io + HTML


Firstly, Let's see what Emmet can do with HTML. (CSS is below)

Writing nested elements in HTML is always a little cumbersome, so to show the power of Emmet, let's take an example that would normally be very fiddly to set up:

PROBLEM:

A div with an un-ordered list, four list items, and spans within each of those list items.

Type the following into your editor, and then simply just hit tab!

div>ul>li*4>span

RESULT:

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

It's that simple! The element, followed by the > arrow will allow you to place elements inside of the preceeding one. + will allow you to place elements side by side.

Now the power of Emmet doesn't end there. What if you want those elements to have different combinations of classes and id's?

PROBLEM:

We want the div to have a class of "container", the list to have an id of "first-list", the items to have a class of "item" and finally the spans to have a class of "red-text".

Type the following into your editor, and once again hit tab!

div.container>ul#first-list>li.item*4>span.red-text

RESULT:

<div class="container">
<ul id="first-list">
   <li class="red-text"> </li>
   <li class="red-text"> </li>
   <li class="red-text"> </li>
   <li class="red-text"> </li>
  </ul>
</div>

And there you have it! Emmet for HTML is kind of amazing! The fun doesn't stop there.... I'll now run over what it can do for CSS right below.


Emmet.io + CSS


Emmet for CSS works in a similar fashion to HTML, giving the user handy shortcuts to quickly output common attributes and values quickly and painlessly. I'll give you my favourite examples below.

fl   =   float: left;
d:ib  =   display: inline-block;
m:a  =   margin: auto;
ta  =   text-align: left;
lis:n =   list-style: none;
tt  =   text-transform: uppercase;

Check out this Cheat Sheet to really get a full idea of just how beneficial Emmet can be to your coding speed.

And that wraps this blog entry up, I hope you enjoyed it!

~
Idris