DEV Community

Cover image for Amazing Emmet shortcuts to code faster
Rakesh Potnuru
Rakesh Potnuru

Posted on

Amazing Emmet shortcuts to code faster

Emmet is one the most useful extensions which is used to write lines of code with a single shortcut. Here are some top Emmet shortcuts to save your time ⏳.

Prerequisites

  1. Make sure you have Emmet extension installed in your code editor.
  2. Knowledge on HTML, CSS

Let's get started

Let's get started

1. Sibling - +

main+section+footer

1 <main></main>
2 <section></section>
3 <footer></footer>
Enter fullscreen mode Exit fullscreen mode

2. Child - >

html>body>main>h1

1 <html>
2 <body>
3     <main>
4         <h1></h1>
5     </main>
6 </body>
7 </html>
Enter fullscreen mode Exit fullscreen mode

3. Climb-up - ^

Each ^ makes the element separate from previous element by one level.

div+div>p>span+em^^bq

1 <div></div>
2 <div>
3     <p><span></span><em></em></p>
4 </div>
5 <blockquote></blockquote>
Enter fullscreen mode Exit fullscreen mode

4. Multiplication - *

select>option*3

1 <select name="" id="">
2     <option value=""></option>
3     <option value=""></option>
4     <option value=""></option>
5 </select>
Enter fullscreen mode Exit fullscreen mode

5. Item numbering - $

h$[title=item$]{Header $}*3

1 <h1 title="item1">Header 1</h1>
2 <h2 title="item2">Header 2</h2>
3 <h3 title="item3">Header 3</h3>
Enter fullscreen mode Exit fullscreen mode

Reverse

h$@-*3

1 <h3></h3>
2 <h2></h2>
3 <h1></h1>
Enter fullscreen mode Exit fullscreen mode

Start from

h$@3*5

1 <h3></h3>
2 <h4></h4>
3 <h5></h5>
4 <h6></h6>
5 <h7></h7>
Enter fullscreen mode Exit fullscreen mode

6. Grouping - ()

You can't do something like this main>h1+footer. These is where grouping helps.

(main>h1)+footer

1 <main>
2     <h1></h1>
3 </main>
4 <footer></footer>
Enter fullscreen mode Exit fullscreen mode

7. ID and CLASS attributes - #,.

form#search.wide

1 <form id="search" class="wide"></form>
Enter fullscreen mode Exit fullscreen mode

div.class1.class2

1 <div class="class1 class2"></div>
Enter fullscreen mode Exit fullscreen mode

8. Custom attributes

input[type="password" name="password"]

1 <input type="password" name="password">
Enter fullscreen mode Exit fullscreen mode

9. Text - {}

button{Click me}

1 <button>Click me</button>
Enter fullscreen mode Exit fullscreen mode

10. Implicit tag names

table>.row>.col

1 <table>
2     <tr class="row">
3         <td class="col"></td>
4     </tr>
5 </table>
Enter fullscreen mode Exit fullscreen mode

Now see some CSS 🥶

pos:f

1 position:fixed;
Enter fullscreen mode Exit fullscreen mode

d:if

1 display:inline-flex;
Enter fullscreen mode Exit fullscreen mode

d:tbclg

1 display:table-column-group;
Enter fullscreen mode Exit fullscreen mode

mb:a

1 margin-bottom:auto;
Enter fullscreen mode Exit fullscreen mode

bxsh

1 box-shadow:inset hoff voff blur color;
Enter fullscreen mode Exit fullscreen mode

ff:ss

1 font-family:sans-serif;
Enter fullscreen mode Exit fullscreen mode

whs:nw

1 white-space:nowrap;
Enter fullscreen mode Exit fullscreen mode

bgc:t

1 background-color:transparent;
Enter fullscreen mode Exit fullscreen mode

bd+

1 border:1px solid #000;
Enter fullscreen mode Exit fullscreen mode

trf:t3

1 transform: translate3d(tx, ty, tz);
Enter fullscreen mode Exit fullscreen mode

anim-

1 animation:name duration timing-function delay iteration-count
2 direction fill-mode;
Enter fullscreen mode Exit fullscreen mode

@kf

1 @-webkit-keyframes identifier {
2     from {  }
3     to {  }
4 }
5 @-o-keyframes identifier {
6     from {  }
7     to {  }
8 }
9 @-moz-keyframes identifier {
10     from {  }
11     to {  }
12 }
13 @keyframes identifier {
14     from {  }
15     to {  }
16 }
Enter fullscreen mode Exit fullscreen mode

That's it

That's it for today


Hope this helps you!
Save for reference.
Connect with me on Twitter and GitHub. Follow me for more 😃.

Discussion (0)