DEV Community

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

Posted on

Amazing Emmet shortcuts to code faster

#emmet #webdev #html #css

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 😃.

Top comments (0)

Read next

kleverway profile image

Why Webflow is the Future for Developers 2025

Jayamurugavel G -

fabbuilder profile image

React + Vite: The ultimate guide to static application deployment

FAB Builder | Code Generation -

emiloju profile image

Building SaaS Faster with Ercas for SaaS: A Template for Indie Hackers

Edun Rilwan -

sujans profile image

Made a whimsical theme toggle, with CSS and emojis

Sujan Sundareswaran -