Emmet - Meet better ZenCoding

Recently new version of ZenCoding named Emmet came out of beta: http://docs.emmet.io/

Emmet came out with support for many popular IDE's and editors. For me in SublimeText2 is only a matter of installing a Emmet package with PackageControl.

If you know ZenCoding most of your workflow will be the same eg:

_ul#nav>li.item$\*4>a{Item $}_

with Tab will create:

        _<ul id="nav">_

_            <li class="item1"><a href="">Item 1</a></li>_

_            <li class="item2"><a href="">Item 2</a></li>_

_            <li class="item3"><a href="">Item 3</a></li>_

_            <li class="item4"><a href="">Item 4</a></li>_

_        </ul>_

New thing are abbreviations for CSS and Actions, fortunately there is cheat-sheet at docs page: http://docs.emmet.io/cheat-sheet/

Example of CSS:
_bd_     is translated to: _border:|;_

So it can save you some typing, but adding all of your typing together (whole month of typing of css) this can mean real improvement and productivity gain.

Share on Hacker News
Share on LinkedIn

← Home

Want to learn more?

Sign up to get a digest of my articles and interesting links via email every month.

* indicates required

Please select all the ways you would like to hear from Krzysztof Kula:

You can unsubscribe at any time by clicking the link in the footer of my emails.

I use Mailchimp as a marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing. Learn more about Mailchimp's privacy practices here.