DEV Community

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

Posted on • Edited on • Originally published at itsrakesh.com

7 2

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

profile
Heroku
 Promoted

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

profile
Pieces.app
 Promoted

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

Read next

endlessmessages profile image

Using Triplet Loss for Face Recognition Systems

endlessmessages -

mds05 profile image

Understanding the Spring Security Architecture

Md Shahriar -

emma_richardson profile image

Linux Commands Cheat Sheet

Emma Richardson -

keploy profile image

JUnit Testing: A Comprehensive Guide to Unit Testing in Java

keploy -