How to make your Workflow Faster with Emmet and Why should you use it?

Emmet
I’m using Emmet about two years and I’ll be using it probably till last because it’s just awesome. I love it. Emmet official website.

What is Emmet?

Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow.

This is written in Emmet’s official site. So it’s totally perfect defination of it :).

Why Emmet?

– Actually Emmet previously known as Zen Coding. I’m sure some of you’ve heard about it.
– Emmet is robust, faster and user-friendly Plugin.
– With Emmet you can write html with css-like way. Don’t get it? Okay..
Example: ul>li
will be expanded to

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

As written in Emmet official Docs

Emmet takes the snippets idea to a whole new level: you can type CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation. Emmet is developed and optimised for web-developers whose workflow depends on HTML/XML and CSS, but can be used with programming languages too.

– We can also say that we’re just writing abbreviations.

Where is Emmet supported/available?

It’s available in many native and web apps. Some of those are mentioned below.
Native apps:

  • Sublime Text
  • Coda
  • TextMate
  • Brackets
  • Adobe Dreamweaver

Web apps:

  • CodePen
  • JSFiddle
  • JS Bin
  • CSSDeck etc…
You can go directly to this page for more information on it.
– Emmet is really helpful when we want to write many lines of code. Like if We want 5 <nav> in which a<ul> contains 5 <li> with <a>, Then we’ve to just write nav*5>ul>li*5>a which’ll be expanded to…
<nav>
  <ul>
    <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>
</nav>
<nav>
  <ul>
    <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>
</nav>
<nav>
  <ul>
    <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>
</nav>
<nav>
  <ul>
    <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>
</nav>
<nav>
  <ul>
    <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>
</nav>

– We’re writing similar to CSS Selectors. Right !!
– You can also do it with html-preprocessor. With the help of Haml, above example can be written in Haml as shown below.

-(1..5).each do |i|
  %nav
    %ul
      -(1..5).each do |i|
        %li
          %a

– It will give the same output.

Features of Emmet
  • Expand Abbreviation
  • Match Tag Pair
  • Go to Matching Pair
  • Wrap with Abbreviation
  • Go to Edit Point
  • Select Item
  • Toggle Comment
  • Split/Join Tag
  • Remove Tag
  • Merge Lines
  • Update Image Size
  • Evaluate Math Expression
  • Increment/Decrement Number
  • Reflect CSS Value
  • Encode/Decode Image to data:URL

From Emmet Docs
– Below are some examples of these features.
– Remember Emmet is genius If you write simple .class It’ll be expanded to <div class=”class”></div> but if you write ul>.link-$*5 then it’ll be expanded to…

<ul>
  <li class=”link-1″></li>
  <li class=”link-2″></li>
  <li class=”link-3″></li>
  <li class=”link-4″></li>
  <li class=”link-5″></li>
</ul>

– So, It knows that li comes inside ul. Remember you’ve to hit Tab after all the examples.

Examples

html-5 will be expanded to…

<!doctype html>
<html lang=”en”>
<head>
  <meta charset=”UTF-8″ />
  <title>Document</title>
</head>
<body>

</body>
</html>

(header>ul#nav>li*4>a{link-$})+(#content>h1{Hi}) will be expanded to…

<header>
  <ul id=”nav”>
    <li><a href=””>link-1</a></li>
    <li><a href=””>link-2</a></li>
    <li><a href=””>link-3</a></li>
    <li><a href=””>link-4</a></li>
  </ul>
</header>
<div id=”content”>
  <h1>Hi</h1>
</div>

– Emmet also works for CSS. Some examples are shown below.
bg will be background: ;
ovh will be overflow: hidden;
tac will be text-align: center;
p0 will be padding: 0;
bsh will be expanded to…

-webkit-box-shadow: inset hoff voff blur color;
-moz-box-shadow: inset hoff voff blur color;
box-shadow: inset hoff voff blur color;

– What if we want to write many properties at a time?
p0+m0+mt1em+f++fwb+fsi will be expanded to…

padding: 0;
margin: 0;
margin-top: 1em;
font: 1em Arial,sans-serif;
font-weight: bold;
font-style: italic;

p0!+m0!+dib will be expanded to…

padding: 0 !important;
margin: 0 !important;
display: inline-block;

lg(left, #fc0 10%, red) will be expanded to…

background-image: -webkit-linear-gradient(left, #fc0 10%, red);
background-image: -o-linear-gradient(left, #fc0 10%, red);
background-image: linear-gradient(to right, #fc0 10%, red);

– Final example:
html-5((header>nav>ul>li*5>a{link-$})+(div.content>h1{Hi}+p{Hello})+footer{It’s footer}) or !((header>nav>ul>li*5>a{link-$})+(div.content>h1{Hi}+p{Hello})+footer{It’s footer}) will be expanded to…

<!doctype html>
<html lang=”en”>
<head>
  <meta charset=”UTF-8″>
  <title>Document</title>
</head>
<body>
  <header>
    <nav>
      <ul>
        <li><a href=””>link-1</a></li>
        <li><a href=””>link-2</a></li>
        <li><a href=””>link-3</a></li>
        <li><a href=””>link-4</a></li>
        <li><a href=””>link-5</a></li>
      </ul>
    </nav>
  </header>
  <div class=”content”>
    <h1>Hi</h1>
    <p>Hello</p>
  </div>
  <footer>It’s footer</footer>
</body>
</html>

Emmet Cheat Sheet

Final Words
Emmet is just awesome. We like to write code faster, so Emmet is the tool to chase that dream. You should use it and comment below about your experience with it and also comment down if you found anything better or anything new in the coding stuff.
Share This Now:

Add a Comment

Your email address will not be published. Required fields are marked *