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
- Make sure you have Emmet extension installed in your code editor.
- For visual studio code
- For Jetbrains IDEs
- For Atom
- Knowledge on HTML, CSS
Let's get started
1. Sibling - +
main+section+footer
1 <main></main>
2 <section></section>
3 <footer></footer>
2. Child - >
html>body>main>h1
1 <html>
2 <body>
3 <main>
4 <h1></h1>
5 </main>
6 </body>
7 </html>
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>
4. Multiplication - *
select>option*3
1 <select name="" id="">
2 <option value=""></option>
3 <option value=""></option>
4 <option value=""></option>
5 </select>
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>
Reverse
h$@-*3
1 <h3></h3>
2 <h2></h2>
3 <h1></h1>
Start from
h$@3*5
1 <h3></h3>
2 <h4></h4>
3 <h5></h5>
4 <h6></h6>
5 <h7></h7>
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>
7. ID and CLASS attributes - #,.
form#search.wide
1 <form id="search" class="wide"></form>
div.class1.class2
1 <div class="class1 class2"></div>
8. Custom attributes
input[type="password" name="password"]
1 <input type="password" name="password">
9. Text - {}
button{Click me}
1 <button>Click me</button>
10. Implicit tag names
table>.row>.col
1 <table>
2 <tr class="row">
3 <td class="col"></td>
4 </tr>
5 </table>
Now see some CSS 🥶
pos:f
1 position:fixed;
d:if
1 display:inline-flex;
d:tbclg
1 display:table-column-group;
mb:a
1 margin-bottom:auto;
bxsh
1 box-shadow:inset hoff voff blur color;
ff:ss
1 font-family:sans-serif;
whs:nw
1 white-space:nowrap;
bgc:t
1 background-color:transparent;
bd+
1 border:1px solid #000;
trf:t3
1 transform: translate3d(tx, ty, tz);
anim-
1 animation:name duration timing-function delay iteration-count
2 direction fill-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 }
That's it
Hope this helps you!
Save for reference.
Connect with me on Twitter and GitHub. Follow me for more 😃.
Top comments (0)