Increase your HTML / CSS coding speed with EMMET

Codeninja.com just published a very interesting article about the excellent free code-completion/code-generation tool EMMET, which allows you to create huge HTML or CSS constructs by simple typing some characters. Let’s have a look:

When using EMMET (usually a seamless integrated plugin in your favourite IDE/coding tool) you can simply type:

ul>li*5

and press TAB (or ENTER or whatever is defined as the EMMET-action-key) to create something like

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

Cool ! But that’s just VERY basic. You can put variables and “counter values” in there, like:

ul#nav>li*5>a{Page $}

which will create

<ul id="nav">
    <li><a href="">Page 1</a></li>
    <li><a href="">Page 2</a></li>
    <li><a href="">Page 3</a></li>
    <li><a href="">Page 4</a></li>
    <li><a href="">Page 5</a></li>
</ul>

Create a full font-face construct with

@f+

When editing the result, EMMET will automatically sync the values of the “Filename”:

@font-face { 
    font-family: 'FontName'; 
    src: url('FileName.eot'); 
    src: url('FileName.eot?#iefix') 
    format('embedded-opentype'), 
    url('FileName.woff') format('woff'), 
    url('FileName.ttf') format('truetype'), 
    url('FileName.svg#FontName') 
    format('svg'); 
    font-style: normal; 
    font-weight: normal; 
}

There are hundreds of commands like that, and you can create your own. This comes extremely handy when writing a lot of CSS, especially when using a lot of browser vendor fixes, like -webkit… !

PHPStorm users: EMMET is integrated into PHPStorm 6/7 by default. Interesting side-fact: There’s a code-completion for PHP too, built-in into PHPStorm, but more on that in another article.

List of EMMET commands:

http://docs.emmet.io/cheat-sheet/

List of supported IDEs and coding tools

http://emmet.io/download/

Demo Video