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
5 min read
Hiring Angular Developers in 2023: Insider Tips & Strategies
Does your company struggle to create a modern, high-performance, cross-platform web app? Do you desire cost-effective development without compromising future software quality? Many web development teams utilize Angular to build complicated single-page apps. Hiring Angular programmers is difficult.
8 min read
How Feature Flags Can Help You Ship Faster and Smarter?
Are you tired of long development cycles and hesitant to push new features to production? Feature flags may be the solution you're looking for. In this blog post, we'll explore how feature flags can streamline your development process, reduce the risk of errors, and give you more control over the features you release to your users. From testing new features to rolling out changes to a select group of users, feature flags can help you do it all. Keep reading to learn how you can start using feature flags in your development workflow today.