Skip to Content

Sublime Text Package of the Day: Zen Coding

Posted on

Zen Coding is supported by Sublime, and I’ve been doing a lot more front end work lately. I’m going to try and use it to see how helpful it is during daily coding.

For a refresher on what Zen Coding does, you type a simple shorthand:

div#page>div.logo+ul#navigation>li*5>a

Which Zen Coding expands into:

:::html
<div id="page">
  <div class="logo"></div>
    <ul id="navigation">
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
    </ul>
</div>

That is a lot less typing! While some of the syntax can get complicated you can use Zen Coding to do very simple things:

Within a .html file type:

li*5

In Sublime hit CTRL+SPACE (TAB seems to work as well) and you will get:

:::html
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>

Type (remember to his CTRL+SPACE)

div.myDivName

And get:

:::html
<div class="myDivName"></div>

Make sure to check out the extensive documentation on the Zen Coding site to learn more. And Zen Coding is available for almost all the popular editors so if you haven’t moved to Sublime yet, don’t panic!

Zen Coding can be found in Package Control or on Google Code.