Emmet

Not to long ago I was hearing about Zen Coding, and at the time I thought nothing of it. Why would I need a tool to help me write faster markup, HTML isn’t that hard…WRONG. I started to look into it again, and noticed that it had changed its name to Emmet, and it is amazing.

Why would you want to use such a tool? When you are building out sites and have to have tags that repeat over and over. Copy and paste seems fine, but it can sure get tedious. Enter Emmet.

Example markup, you would probably copy and paste all the li tags.

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

With Emmet you can write a small amount of syntax you can produce that same markup:

ul>li*6

Hit Tab and done. It is that easy. Since picking it up I have seen my initial markup phase speed up. It is really a case of “Why would I need that” until you start using it. Looking into the documentation you will find that it also lets you added attributes as well.

ul>li.col$*6

To get:

<ul>
	<li class="col1"></li>
	<li class="col2"></li>
	<li class="col3"></li>
	<li class="col4"></li>
	<li class="col5"></li>
	<li class="col6"></li>
</ul>

It is a great tool that you should definitely look into.