Amazing Emmet shortcuts to code faster

Rakesh Potnuru - Nov 14 '21 - - Dev Community

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

Image
Case Study: Sorting an Array of Objects

java, programming, learning, beginners
Image
Introduction to Pact Flow

pactflow, springboot, kotlin, contracttesting
Image
Deploy expo app to App Store

mobile, appstore, reactnative, ios
Image
Why TypeScript is a Game Changer for JavaScript Developers
Image
How can we get and set the OpenMP environment from Perl?

perl, parallelprogramming, omp
Image
How to Create an Ai-Ai Shitboat in 30 Seconds

ai
Image
Generic Methods

java, programming, learning, beginners
Image
Caching & Memoization with state variables

perl, caching, memoization
Image
Generating Optimized Image Formats with Node.js

webdev, javascript, beginners, node
Image
Image Lazy Loading

react, webdev, programming, development
Image
JDBC and Streams have never been simpler

jdbc, lambda, java, functional
Image
Oh No... CORS Error! A Backend Developer's Journey

backenddevelopment, node, beginners, internship
Image
Defining Generic Classes and Interfaces

java, programming, learning, beginners
Image
Low-code drag-and-drop tool for building RESTful APIs with in minutes.

node, webdev, opensource, typescript
Image
Simplifying Date Formatting in JavaScript
Image
Generics

java, programming, learning, beginners
Image
Azure Synapse Analytics Security: Data Protection

azure, sqlserver, dataengineering
Image
Unlock Creativity with MonsterONE!

website, webcomponents, themes, webdev
Image
Cool-Aide Air Conditioning & Heating
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .