shrayasr/emmet-awesomeness.md

## emmet-awesomeness.md

      
    Raw
  

              emmet-awesomeness.md
            
          
    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!