Last updated:
2 min read
Amazing Emmet shortcuts for HTML and CSS to code faster
Rakesh Potnuru
Author
0%
SHARE

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

  1. Make sure you have Emmet extension installed in your code editor.
  1. 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>

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

That's it for today


Thanks for reading!


LEAVE A COMMENT OR START A DISCUSSION

MORE ARTICLES

Dockerizing Your MERN Stack App: A Step-by-Step Guide

    14 min read

Dockerizing Your MERN Stack App: A Step-by-Step Guide

Are you tired of spending hours messing with crontabs and installing packages in an attempt to run your app locally? Are you sick of always missing a dependency that doesn't allow you to run the app and therefore you have to debug it for hours trying to find what's wrong? Then you've come to the right place. In this article, you will learn how to make use of Docker to develop and ship your software faster and easier.

Introducing Publish Studio: Power Digital Content Creation

    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.

Subscribe to Newsletter

Weekly


  • Never miss an update.
  • Get articles and snippets directly to your inbox.
  • Subscribe to stay connected and avoid getting lost among millions of websites.

Monthly


  • Coming soon...