Emmet Awesomeness

Lets face it, writing HTML is really not a fun thing to do. With so many < and so many > and all the horrific closing tags. There has to be a better way.

Enter Emmet. Emmet is a plugin for many text editors that makes the job of writing HTML super easy. It provides a bunch of abbreviations whose syntax is inspired by CSS.

Example

In bootstrap, to get a button dropdown the syntax is this:

<div class="btn-group">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
  </ul>
</div>

And writing that would be so painful. With Emmet installed on your editor (vim for me) you write this:

.btn-group>button.btn.btn-default.dropdown-toggle[data-toggle="dropdown"]
  >span.caret^ul.dropdown-menu[role="menu"]>li*2>a[href="#"]

BOOM!

shrayasr/emmet-awesomeness.md

Emmet Awesomeness

Example