#129: Emmet (is Awesome)

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Emmet is an add-on for code editors that allows you to write HTML and CSS more quickly.

On the HTML front, it allow you to write abbreviations for HTML. For instance

table>tr*3>td*3

Turns into

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

When you “expand” it. Expanding happens with a trigger key, usually the TAB key.

This is similar to Zen Coding, and in fact Emmet is an evolution of Zen Coding. You can get pretty fancy with this and it really start to feel natural and powerful after a while. You can get comfortable with it, because Emmet is available on such a huge array of code editors including right on CodePen.

On the CSS front, Emmet offers what is called Fuzzy Search, which allows you to quickly/loosely type CSS properties and values and it will take a stab at expanding it out into what you mean. It usually works pretty good.

For instance, w[TAB] turns into width: ; with the cursor right before the semicolon. ov:h[TAB] turns into overflow: hidden; Pretty rad, you’ll just have to give it a try. It’s smarter than trying to memorize an exact abbreviation for every single CSS property and value (there are just too many).