Amazing Emmet shortcuts for HTML and CSS to code faster
Emmet is one of the most useful extensions which are 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
1position:fixed;
d:if
1display:inline-flex;
d:tbclg
1display:table-column-group;
mb:a
1margin-bottom:auto;
bxsh
1box-shadow:inset hoff voff blur color;
ff:ss
1font-family:sans-serif;
whs:nw
1white-space:nowrap;
bgc:t
1background-color:transparent;
bd+
1border:1px solid #000;
trf:t3
1transform: translate3d(tx, ty, tz);
anim-
1animation:name duration timing-function delay iteration-count 2direction 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
Thanks for reading!
LEAVE A COMMENT OR START A DISCUSSION
MORE ARTICLES
3 min read
Introducing Publish Studio: Power Digital Content Creation
Say “Hi” to Publish Studio, a platform I’ve building for the past few months. If you are a content writer, then you should definitely check it out. And if you are someone who has an audience on multiple blogging platforms and need an easy way to manage your content across platforms, then you should 100% give it a try.
10 min read
Let's Build a Full-Stack App with tRPC and Next.js 14
Are you a typescript nerd looking to up your full-stack game? Then this guide is for you. The traditional way to share types of your API endpoints is to generate schemas and share them with the front end or other servers. However, this can be a time-consuming and inefficient process. What if I tell you there's a better way to do this? What if I tell you, you can just write the endpoints and your frontend automatically gets the types?