Grow your CSS skills. Land your dream job.

#129: Emmet (is Awesome)

Emmet is an add-on for code editors that allows you to write HTML and CSS more quickly.

On the HTML front, it allow you to write abbreviations for HTML. For instance

table>tr*3>td*3

Turns into

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

When you "expand" it. Expanding happens with a trigger key, usually the TAB key.

This is similar to Zen Coding, and in fact Emmet is an evolution of Zen Coding. You can get pretty fancy with this and it really start to feel natural and powerful after a while. You can get comfortable with it, because Emmet is available on such a huge array of code editors including right on CodePen.

On the CSS front, Emmet offers what is called Fuzzy Search, which allows you to quickly/loosely type CSS properties and values and it will take a stab at expanding it out into what you mean. It usually works pretty good.

For instance, w[TAB] turns into width: ; with the cursor right before the semicolon. ov:h[TAB] turns into overflow: hidden; Pretty rad, you'll just have to give it a try. It's smarter than trying to memorize an exact abbreviation for every single CSS property and value (there are just too many).

Comments

  1. usin emmet with sublimeText 2 and it’s speeding my workflow significantly.

  2. Eddy
    Permalink to comment#

    Does it work with cloud 9?

  3. Rick H
    Permalink to comment#

    Nice video. I’ve had it installed in Notepad++ for a bit, and it is pretty sweet. It doesn’t have quite as many shortcuts as the Mac version from the looks of things, but I think I’m going to start using it a bit more.

  4. Permalink to comment#

    Emmet is awesome, another feature I find myself using is wrap with tags (ctrl + shift + g on windows/sublime text). It even indents the code nicely.

    I actually have no need/desire to use something like jade because of emmet.

  5. Emmet :) I loved ZenCoding ever since it first became available. This is and should be top most priority thing to use in anyone’s workflow.

  6. Samiullah
    Permalink to comment#

    I really liked this video
    -not because I found about emmet via this video
    -not because There is no other resources online about emmet

    But Because you will not any find any better video than this jump start video tutorial on Emmet

    • Hi @Samiullah,

      yes I love Chris’ videos too they are great but saying there is no other or better source is a bit disrespectful to the very author of Emmet: Sergey Chikuyonok because he made great DOCS for Emmet.

      And there ARE other good tutorials:

      Tuts+ Emmet
      Goodbye Zen Coding Hello Emmet
      7 Awesome Emmet HTML Time-Saving Tips

      Try to google more next time using “topic you want” + keywords like “docs, intro, tutorial, basics”.

      Cheers mate.

    • Permalink to comment#

      Hi Yourself @Daniel Krsiak
      Don’t take it seriously man,

      I’ve great respect for the author of emmet and all of the resources that you have mentioned.

      That was just my opinion, and I appreciate this video because it worked for me, not the other’s it’s hard to me to read those long blog post, or dig into those docs.

      Again, I’m sorry, if my words did hurt you.

  7. Permalink to comment#

    What theme is that? Ur Sublime Text looks´╗┐ nice ;)

  8. Permalink to comment#

    Emmet is AMAZING! I discovered it a few months ago, and it has dramatically increased my workflow. Great idea for sharing.

  9. Terkel
    Permalink to comment#

    Great video!

    It’s pretty fun, I read about Emmett Till yesterday, thanks to Kanye:

    http://rapgenius.com/Kanye-west-through-the-wire-lyrics#note-9234

  10. Mark
    Permalink to comment#

    Glad to see a shoutout for Emmet, it’s my all time favorite plugin for anything. Can’t believe I missed when CodePen rolled over from Zen.

  11. Permalink to comment#

    Thanks for this. It helped me finally take the plunge and try out Emmet. For whatever reason, I always had the idea it was much harder to pick up than you show it to be.

  12. Benxamin
    Permalink to comment#

    While “Emmet” glides off the tongue easier than saying “Zen coding,” I will always prefer the latter. Mostly because it actually describes what it is.

    Also, it makes the whiteboard part of the interview shorter.

  13. Permalink to comment#

    I’m currently studying and I’ve learnt to use Emmet in a very short time as it is very intuitive with the fuzzy searching.
    As for which color scheme he is using the one in the pictures is nexus I’m using the same theme in sublime text 3 but a different color scheme I like a phoenix-Dark Blue as it’s easy to read on my tired eyes.
    {
    “color_scheme”: “Packages/Theme – Phoenix/Color Scheme/Phoenix Dark Blue.tmTheme”,
    “theme”: “Nexus.sublime-theme”
    }

  14. Taariqq
    Permalink to comment#

    Thanks for the video, downloading now. I use it with Brackets editor. The ‘Live’ preview of HTML and CSS in Brackets is awesome and this extension makes it awsomer. Going thru the Code Academy tutorials seems like a pain because of no emmet.

  15. Goose
    Permalink to comment#

    Thank you so much for this!

  16. Permalink to comment#

    Allows* :P you’re the man, Chris!

  17. SergeyDruid
    Permalink to comment#

    An advice for those who experience delays with Notepad++.
    I started to use it along with notepad++, it was great but everytime I pressed the hotkey there was a significant delay before I saw the desired code popping out… it was nearly frustrating because I write css code very fast.
    So I downloaded Brackets and installed Emmet, everything now works perfectly!

  18. Aaron
    Permalink to comment#

    If you’re using a CSS preprocessor to handle your autoprefixing, you may want to change your Emmet settings to not automatically include vendor prefixing for you. All you have to do is include "css.autoInsertVendorPrefixes": false in a file named preferences.json. Place the .json file in a folder called extension support. Then change your Emmet.sublime-settings file to point to your .json file by changing extensions_path":"~/emmet/ to "extensions_path": "~/path/to/extension_settings"

  19. Just discovered this today. I am using textmate 2, and just playing around with it for a few mins I can already see how I will be incorporating this into my workflow. Love it! Thanks!

  20. ali
    Permalink to comment#

    great tutorial and I am really enjoy watching it .. very helpful especially when someone try it directly during watching you do this magical abbreviations Stuff and of course you bring to us the perfect meaning of the awesomeness Big Up Bro ..

  21. Bud
    Permalink to comment#

    Does EMMITT work in Dreamweaver?

  22. Bud
    Permalink to comment#

    EMMET

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".