High-Speed Coding Goodbye, Zen Coding. Hello, Emmet!

Advertisement

Back in 2009, Sergey Chikuyonok wrote an article1 to present a new way of writing HTML and CSS code. This revolutionary plugin, called Zen Coding, has helped many developers through the years and has now reached a new level.

Emmet2, previously known as Zen Coding, is the most productive and time-saving text-editor plugin you will ever see. By instantly expanding simple abbreviations into complex code snippets, Emmet can turn you into a more productive developer.

For those who prefer to watch instead of read, here is a summary of my favorite tricks.

How Does It Work? Link

Let’s face it: writing HTML code takes time, with all of those tags, attributes, quotes, braces, etc. Of course, most text editors have code completion, which helps a lot, but you still have to do a lot of typing. Emmet instantly expands simple abbreviations into complex code snippets.

HTML Abbreviations Link

Initializers Link

Getting started with a new HTML document takes less than a second now. Just type ! or html:5, hit “Tab,” and you’ll see an HTML5 doctype with a few tags to jumpstart your application.

Emmet Demonstration - Initializers

  • html:5 or ! for an HTML5 doctype
  • html:xt for an XHTML transitional doctype
  • html:4s for an HTML4 strict doctype

Easily Add Classes, IDs, Text and Attributes Link

Because Emmet’s syntax for describing elements is similar to CSS selectors, getting used to it is very easy. Try mixing an element’s name (e.g. p) with an identifier (e.g. p#description).

Emmet Demonstration - Classes and IDs

Also, you can combine classes and IDs. For example, p.bar#foo will output this:

<p class="bar" id="foo"></p>

Now let’s see how to define content and attributes for your HTML elements. Curly brackets are used for content. So, h1{foo} will produce this:

<h1>foo</h1>

And square brackets are used for attributes. So, a[href=#] will generate this:

<a href="#"></a>

Emmet Demonstration - Texts and Attributes

Nesting Link

By nesting abbreviations, you can build a whole page using just one line of code. First, the child operator, represented by >, allows you to nest elements. The sibling operator, represented by +, lets you place elements near each other, on the same level. Finally, the new climb-up operator, represented by ^, allows you to climb up one level in the tree.

Emmet Demonstration - Nesting operators

Grouping Link

To effectively take advantage of nesting without turning them into a confusing mess of operators, you’ll need to group some pieces of code. It’s like math — you just need to use parentheses around certain pieces. For example, (.foo>h1)+(.bar>h2) will output this:

<div class="foo">
  <h1></h1>
</div>
<div class="bar">
  <h2></h2>
</div>

Emmet Demonstration - Grouping

Implicit Tag Names Link

To declare a tag with a class, just type div.item, and then it will generate <div class="item"></div>.

In the past, you could omit the tag name for a div; so, you just had to type .item and it would generate <div class="item"></div>. Now Emmet is more intelligent. It looks at the parent tag name every time you expand the abbreviation with an implicit name. So, if you declare .item inside of a <ul>, it will generate <li class="item"></li> instead of <div class="item"></div>.

Emmet Demonstration - Implicit tag names

Here’s a list of all implicit tag names:

  • li for ul and ol
  • tr for table, tbody, thead and tfoot
  • td for tr
  • option for select and optgroup

Multiplication Link

You can define how many times an element should be outputted by using the * operator. So, ul>li*3 will produce:

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

Emmet Demonstration - Multiplication

Numbering Link

What about mixing the multiplication feature with some item numbering? Just place the $ operator in the element’s name, the attribute’s name or the attribute’s value to output the number of currently repeated elements. If you write ul>li.item$*3, it will output:

<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
</ul>

Emmet Demonstration - Numbering

Try It Now! Link

Why not try it right now? Go ahead: type in an Emmet HTML abbreviation, and hit the Tab key.

CSS Abbreviations Link

Values Link

Emmet is about more than just HTML elements. You can inject values directly into CSS abbreviations, too. Let’s say you want to define a width. Type w100, and it will generate:

width: 100px;

Emmet Demonstration - Values

Pixel is not the only unit available. Try running h10p+m5e, and it will output:

height: 10%;
margin: 5em;

Here’s a list with a few aliases:

  • p → %
  • e → em
  • x → ex

Extra Operator Link

You already know many intuitive abbreviations, such as @f, which produces:

@font-face {
  font-family:;
  src:url();
}

Some properties — such as background-image, border-radius, font, @font-face, text-outline, text-shadow — have some extra options that you can activate by using the + sign. For example, @f+ will output:

@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;
}

Emmet Demonstration - Extra operator

The CSS module uses fuzzy search to find unknown abbreviations. So, every time you enter an unknown abbreviation, Emmet will try to find the closest snippet definition. For example, ov:h and ov-h and ovh and oh will generate the same:

overflow: hidden;

Emmet Demonstration - Fuzzy Search

Vendor Prefixes Link

CSS3 is awesome, but those vendor prefixes are a real pain for all of us. Well, not anymore — Emmet has abbreviations for them, too. For example, the trs abbreviation will expand to:

-webkit-transform: ;
-moz-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;

Emmet Demonstration - Vendor Prefixes

You can also add prefixes to any kind of element. You just need to use the - prefix. So, -super-foo will expand to:

-webkit-super-foo: ;
-moz-super-foo: ;
-ms-super-foo: ;
-o-super-foo: ;
super-foo: ;

What if you don’t want all of those prefixes? No problem. You can define exactly which browsers to support. For example, -wm-trf will output:

-webkit-transform: ;
-moz-transform: ;
transform: ;
  • w-webkit-
  • m-moz-
  • s-ms-
  • o-o-

Gradients Link

Speaking of annoying CSS3 features, we cannot forget gradients. Those long definitions with different notations can now be easily replaced with a concise, bulletproof abbreviation. Type lg(left, #fff 50%, #000), and the output will be:

background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));
background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -moz-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(left, #fff 50%, #000);

Emmet Demonstration - Gradients

Try It Now! Link

Had enough of the animated GIFs? Go ahead — type an Emmet CSS abbreviation, and hit the Tab key.

Extras Link

Lorem Ipsum Link

Forget about those third-party services that generate “Lorem ipsum” text. Now you can do that right in your editor. Just use the lorem or lipsum abbreviations. You can specify how many words to generate. For instance, lorem10 will output:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero delectus.

Emmet Demonstration - Lorem Ipsum

Also, lorem can be chained to other elements. So, p*3>lorem5 will generate:

<p>Lorem ipsum dolor sit amet.</p>
<p>Voluptates esse aliquam asperiores sunt.</p>
<p>Fugiat eaque laudantium explicabo omnis!</p>

Customization Link

Emmet offers a wide range of tweaks that you can use to fine-tune your plugin experience. There are three files you can edit to do this:

And A Lot More! Link

This is just the beginning. Emmet has a lot of other cool features, such as encoding and decoding images to data:URL6, updating image sizes7 and incrementing and decrementing numbers8.

Go check out the new website9, the awesome documentation10 and the handy cheat sheet11!

Supported Editors Link

If you are wondering, “Will it work in my text editor?,” The answer is, “Oh yes, my friend!” A lot of editors are supported, and I hope you find yours in the list below.

And You? Link

What are your favorite tricks? Leave a comment below. Now it’s your turn to share your favorite tricks.

(al) (ea)

Footnotes Link

  1. 1 http://www.smashingmagazine.com/2009/11/21/zen-coding-a-new-way-to-write-html-code/
  2. 2 http://emmet.io
  3. 3 http://docs.emmet.io/customization/snippets/
  4. 4 http://docs.emmet.io/customization/preferences/
  5. 5 http://docs.emmet.io/customization/syntax-profiles/
  6. 6 http://docs.emmet.io/actions/base64/
  7. 7 http://docs.emmet.io/actions/update-image-size/
  8. 8 http://docs.emmet.io/actions/inc-dec-number/
  9. 9 http://emmet.io
  10. 10 http://docs.emmet.io/
  11. 11 http://docs.emmet.io/cheat-sheet/
  12. 12 https://github.com/sergeche/emmet-sublime
  13. 13 https://github.com/emmetio/Emmet.tmplugin
  14. 14 https://github.com/emmetio/emmet-eclipse
  15. 15 https://github.com/emmetio/Emmet.codaplugin
  16. 16 https://github.com/emmetio/Emmet.sugar
  17. 17 https://github.com/sergeche/emmet.chocmixin
  18. 18 https://github.com/emmetio/emmet/downloads
  19. 19 https://github.com/emmetio/emmet/downloads
  20. 20 https://github.com/emmetio/emmet/downloads
  21. 21 https://github.com/emmetio/emmet/downloads
  22. 22 https://github.com/emmetio/codemirror
  23. 23 https://github.com/emmetio/brackets-emmet

↑ Back to top Tweet itShare on Facebook

Zeno Rocha is the author of some cool open source projects like Browser Diet, jQuery Boilerplate and Wormz, a HTML5 Chrome Experiment. He used to work as a software developer at Petrobras (the largest company in Latin America) and Globoesporte.com (the most accessed sports website in Brazil). Now he's a Front-end Engineer at Liferay and co-founder of BrazilJS Foundation.

Advertisement
  1. 1

    This is good stuff. I personally think it saves you a lot of time. But I still prefer sticking to the classic way as it works for me and has worked for me in the past while developing/designing large projects. I am of the idea that too much automation isn’t always good.

    Regards,

    Ali Gajani
    Founder at Mr. Geek
    http://www.mrgeek.me

    2
    • 2

      That’s nice, but I really like to discover new tools to make me more productive :)

      1
      • 3

        Classic way?
        Why not to return to Windows notepad?
        It’s just awsome. I’ve already installed it. Thanks for searching it out!

        4
      • 4

        Hi, Zeno, how are you? Thanks for your comments. I have a question for you. Do you know where I can find all presentations files (ppt, etc) for the FrontIn BH 2013 event? Thanks.

        0
    • 5

      @Ali: Why in this case It wouldn’t be good? If you already know how the HTML and CSS syntax works, why not to save some time? You are still coding and have the control of what you are doing. I personally think is very good idea, like Markdown, Halm and others.

      1
    • 6

      yeah, it’s not automation. it’s keyboard shortcuts. join the CTRL+C revolution…

      1
    • 8

      my opion on the matter is a coding environmentex.sublime text3,dreamweaver needs to be dynamic and involve user expandability to allow for changes in languages and techniques.
      this is one reason i love emmet alot of people swear by notepad thats great but I can type more acuratly and faster with sublime text 3 on the default settings (more so customised).
      my advise would be give emmet a ago also tryout sublime text 3 youll proably want to follow some tutorials on how to set it up and some packages to install.
      my package setup in sublime text 3 is:
      packagecontrol:-essential
      advanced new file:
      emmet
      bracket-hilighter
      modific
      autoprefixr
      sublimelinter
      colorpicker
      nettutsfetch
      sidebarEnhancements
      theme-flatland
      theme-soda

      there are some others but these are the ones I use the most. Sublime is amazing from a new webcoders perspective combine that with live-page in chrome so you can watch your page update as you code.

      2
    • 9

      automation to speed up typing is always great. As long as it can be remember and in this sense it looks like you can. But if your still doing things via notepad or notpad++ then i’d assume your taking forever to complete your projects.

      0
    • 10

      So what is the plug-in for !!!!!!???? That’s a detail that should be crystal clear in the first two lines of the article. I’m not going to waste my time going further with this.

      Looks like you’ve got a lot of great magic going on there. Wish I knew what it was for.

      -3
  2. 12

    Gunnar Bittersmann

    March 26, 2013 4:47 am

    This surely might save a lot of typing.

    But more than one and a half year after the syntax of gradients has been changed, there are still tools around that generate wrong CSS? cf. http://www.1stwebdesigner.com/css/mastering-css-gradients-in-less-than-1-hour/#comment-205142

    Fix that bug, please.

    1
  3. 13

    OMG! I have been coding html pages for the last 4 years I never used these cool things. you made my day. Thanks!

    2
  4. 15

    Or you can just learn how to touch type.
    By definition any short cutting system like this might save you a few keystrokes but at the same time removes any practice you would get in overall learning the ins and outs of complex syntax. Also it isn’t portable. And of course you don’t get the chance to actually think about what you are doing.
    Finally and this is the most important point, increasingly pages are rarely just some bit of HTML. They are generated by the server and the page source or parts of the source is written in some programming language. The more removed you are from this the harder it is to switch back and forth from HTML to CSS to php to SQL etc.
    Joel

    1
    • 16

      I think the rule of thumb for tools like this should be that they are for experienced developers; those that already no the ins and outs of complex syntax.

      I mean if you look at how the tool works it already requires a somewhat solid understanding of CSS in order to be really useful. Essentially it just acts as a more robust version of autocomplete. Would we argue that autocomplete is bad because it removes the need for developers to type out every character of ? Not really. It’s just a productivity tool that you can take or leave and you’re code is tied to it’s use. I could use it today, abandon it tomorrow, and I don’t have to refactor or recode anything.

      That’s what confused me when you talked about portability. When I think of portability I think of some chunk of my code that absolutely relies on a tool. For example my .less files. I really MUST have a lesscss compiler to use them, so they’re not very portable if didn’t want to use a less compiler or went to a system that didn’t have less installed. The difference with Emmet is it just lives in the editor. It’s not producing a separate file that you have to push through some preprocessor or compiler. If you edit an HTML file in conjunction with an Emmet plugin the result is an HTML file that you can then edit in any other HTML editor (just without the benefit of Emmet autocompletion). So the output is still very portable. Plus given the number of tools and languages supported it looks like it should be pretty easy to find a suitable editor/plugin on any Win/*nix/iOS platform.

      I think the model you are talking about, regarding server side generated code isn’t absolute. In fact in my organization if you generate HTML in your server side code you are asking for a failing grade come code review. All the HTML should be in clean little templates with no server side code in them at all. No HTML mixed into your controllers or business objects, no CSS stuffed in some POJO.

      Are the chunks of HTML smaller? Is it more modular and less all-encompassing? Is there less need for hand coding large chunks of HTML? Yes. Yes. Yes. But that doesn’t negate the usefulness of Emmet toward reducing the amount of typing required for even those small chunks of templated code that will be reused to produce larger more complex output.

      Now if you are talking about abstraction frameworks that completely separate the developer from the output. I’m right there with you. I think there becomes a disconnect for the developer between what they type in one language and what gets processed, compiled, transformed and shot out the other end. I don’t feel Emmet falls into this category, since what it produces is available almost immediately in the editor. So you are seeing the real code in (near) real-time and that lowers the amount of abstraction that occurs. Developers still see the HTML, can still handcode and modify the HTML, and aren’t saving some abstract 3rd party .emmett file to be processed at a later date.

      1
    • 17

      I know it’s 2 years later but everything you wrote is wrong.

      0
  5. 18

    Definitely a must-use for front-end developers! I’ve been using it for years now and it’s really time saving.

    1
  6. 19

    A NetBeans plug-in would make it perfect. Really love it, makes life so much easier.

    0
  7. 22

    This is similar to the yasnippet system in emacs. It’s a great timesaver.

    0
    • 23

      Really? I haven’t used emacs yet, but I’m glad to hear that, so I can recommend to my friends :)

      0
  8. 24

    Just installed it for Notepad++ – this is AWESOME!

    0
    • 25

      plz tell me the procedure, not working for me….

      0
      • 26

        Hit Ctrl, Alt and Enter/Return together after typing in the shorthand code.
        This will expand the shorthand code to its fuller form.

        0
  9. 27

    Great post!

    I just install the plugin. It’s awesome.

    0
  10. 29

    Aron @ RedRocketWebWorks

    March 26, 2013 4:47 am

    A must have plugin for any web developer. Other than the name change, does Emmet bring any additional features to the table?

    0
  11. 31

    Try it on JSFiddle! Just hit Tab to complete the code. p.foo[tab]

    0
  12. 32

    Artigo fantástico Zeno! Mandando ver. Eita orgulho infame! :) abraço

    1
  13. 34

    Check out PHPstorm 6 by Jetbrains it now also supports emmet:)

    0
    • 35

      Would you happen to know how to do the autocomplete on gradients in phpstorm 7.1 ? I have looked every where.

      0
  14. 36

    This makes me feel warm and fuzzy inside. I’m really looking forward to getting home and trying it out tonight.

    0
  15. 37

    No textmate2 plugin? :-( please? :’-(

    0
  16. 39

    Zeno, great work!

    0
  17. 41

    Good stuff, going to give it a try on Sublime!

    0
    • 42

      Go ahead, Sublime + Emmet is the most productive workflow ever :)

      0
      • 43

        Agree 110%, I have been using it with Sublime and is really helpful.
        Note: It would be nice that width CSS property have greater precedence than widows, when I tip “wid” and press tab

        0
      • 45

        Sublime + Emmet + LESS (SASS/SCSS or other preprocessor) is even better :)

        1
  18. 46

    great work! looks like a wonderful timesaver.

    0
    • 47

      For sure, give a try and then tell me what you think :D

      0
      • 48

        Tried it out in Espresso and it looks great. It is def a time saver, especially when it comes to making lists and tables. I appreciate it when anyone puts out an Espresso sugar. Thanks!

        0
  19. 49

    Very nice. I can’t wait to try the HTML portion of this plugin out on my next project. Thanks, Zeno.

    0
  20. 50

    Awesome ! Thanks…

    0
  21. 51

    Its awesome.. but its not working directly in Visual Studio 10.. :( …. any way to make this in VS ???

    0
  22. 54

    This is a super time saver THX!

    0
  23. 55

    Great article. I use it in Sublime Text 2. It saves me a lot of boring time typing code. I love it.

    0
  24. 56

    Lucas Cavalcanti

    March 26, 2013 6:29 am

    o/, thankfully something like sparkup the textmate :)

    0
  25. 57

    Reading this, looks great, then I get to the bottom and…no Coda support. Are there any plans for Coda support?

    Would love to use this.

    0
  26. 59

    Thank you for providing the in-article Emmet sandboxes. They let me answer my own question:
    Q – “What about an alias for rem units?”
    A – Yup, Emmet’s got that covered! m5r → margin: 5rem;

    0
  27. 60

    Great job!! I will use Emmet with Sublime :D

    Also, it would be great if Emmet could reach NetBeans!

    Obrigado irmao..!

    0
  28. 61

    Nice article. I liked Zen when I first saw it, but for some reason I never used it after testing it out. Reminds me of Jade even though after you type the abbreviation it turns to full HTML. Jade/Haml would remain the abbreviation.

    0
  29. 62

    Great Zeno! Thanks

    0
  30. 63

    I’ve been using Sublime Text 2 for the past 2 days and just found this was installed with it. After 10 minutes of ‘playing about’ I can tell that this is going to save hours of time. I’ve just knocked up a HTML5 document in 2 minutes!

    Bye bye Dreamweaver

    0
  31. 66

    Ole Marius Loeset

    March 26, 2013 7:05 am

    The HTML part of Emmet is supported in Web Essentials extension for VS2012. Should definitively be added to the list :-)

    For reference, see: http://webessentials.uservoice.com/forums/140520-general/suggestions/3405113-use-newer-emmet-project-that-makes-zen-coding-obso

    0
  32. 67

    Anyone looking for Emmet for Coda (1.6/2.x), here is the link to the plug-in: https://github.com/emmetio/Emmet.codaplugin

    0
  33. 68

    Good article !
    But what’s diffrence between zen coding and emmet ? Just another name ?

    0
  34. 70

    I have been using this for awhile in production and have started training other team members on it. HTML is a joy to write, especially when you can do it shorthand. We all have deadlines and other projects, but this is a great productivity hack. Glad you shared it with the community. There are lots of other Sublime add-ons that allow rapid coding as well.

    0
  35. 71

    Jean-Marc Buytaert

    March 26, 2013 7:44 am

    I have been using Sublime Text 2 with Emmet for quite a while now, and it has been such a time-saving tool, I haven’t felt this productive since I started using it.

    0
  36. 72

    While this plugin looks great for people who generally use other text editors, nothing can really beat Vim in terms of overall productivity and shortcuts/text expansion. Everything is so customizable, and the premise of using multiple, repeating commands is built into the editor. d3d removes 3 lines, 2e moves to the end of the next word, 5> will indent your code 5 tab stops, “+3p will paste the clipboard register 3 times, etc.

    It has on the fly macro creation, code snippet expansion like mentioned above, external shell operations bound to shortcut keys (think: just a few button presses to deploy an entire batch of files or interface with source control) regular expression search/replace, and an incredibly unique layout interface. While in normal mode, you can move quickly through the code to get to the point you need to be, hit c3w to clear the next three words, and start typing in new text from there. Shift-c will clear the rest of the line, dst will delete surrounding tag but keep the inner text; vi) will select anything inside the parentheses, selecting something and hitting s” will surround that text with quotes, etc.

    Vim has a huge learning curve, however, but once learned and set up for your preferences it vastly reduces coding time.

    0
  37. 73

    just awesome,great work zeno…i hav been using phpEd nushpere…
    defiantly give it a try…seriously am very happy to such time saving stuff

    0
  38. 74

    Wow! This is just awesome! I’ll start using it in Sublime.

    0
  39. 75

    Christopher Hawkes

    March 26, 2013 8:27 am

    It’s a big fat waste of time, most editors already have similar features. Nothings worse than having to work around automation which is automating something you don’t want to be automated. Really how long does it take somebody writing 60 words a minute to type a few tags, no big deal really.

    0
  40. 76

    Any plans to add it to Dreamweaver? I’ve been using the fan-created Dreamweaver Zen Coding, but it’s not working quite right in CS6, so I’m still stuck on CS5.5.

    I *could* switch to one of the editors that supports Emmet, but I do a lot of html emails, and Dreamweaver’s split-design-view makes that task so much easier (don’t hate… I only use split-view for emails, but never full websites)

    0
  41. 78

    It is unbelievably awesome!
    imagine coding an entire header area with just this one line : header.myheader>div.logo+nav.mynav>ul#menu>li*5
    lol :p

    0
  42. 79

    Really awesome, congratulations.

    0
  43. 80

    It’s like liking HTML over again

    0
  44. 81

    Haml, Sass, bourbon, Middleman app. These 4 combined make the world a better place.
    No need for guessing, just correct sorting while you code.

    0
  45. 86

    Great words Zeno!
    I’m a Java Developer and I’m working with this workflow before going deeper in jsp files.
    Keep the good work, thanks!

    0
  46. 87

    Great work! I have a question,
    where I can find the shortcuts used in sublimetext?
    I’m trying to change the notepad++ to match.

    0
  47. 89

    Just to let you know: PHPStorm provides Emmit Support too.

    0
  48. 90

    I’ve been using this for a while. One of the great features that no-one has mentioned yet is auto commenting. For a decent read: https://github.com/sergeche/emmet-sublime/issues/225

    The short version, if you add ‘|c’ after your other stuff you get close comments, which can be customized. I find this very helpful in keeping stuff organized.

    0
  49. 91

    That is really useful indeed and if you get the chance to watch a tutorial to learn some sublime text 2 shortcuts & commands then you’re gonna increase your development speed a lot.

    Thanks for the info.

    0
  50. 92

    I really love it and give it a try thank you for sharing this.

    But one question i have , the reference/examples you used in this article;
    Can i have a window inside my editor (notepad++) where i can see the shortcuts?

    0
    • 93

      I don’t think so Hennry, but you could pin a tab in your browser with Emmet’s Cheat Sheet.

      0

↑ Back to top