Emmet is a powerful plugin for web developers that you can use it in many text editors, and it allows you to type abbreviations and display code in html, jsx, css, sass and others, in an easier and faster way. Emmet is installed by default in so many editors like VS Code, WebStorm and IntelliJ.

How does emmet work?

Type your emmet abbreviations and then press the tab key to see the magic happen in front of your eyes. These are a few examples of how to use it:

- Tags with IDs: ‘#’ is used to assign an ID

div#root

<div id="root"></div>

- Tags with classes: ‘.’ is used to assign single or multiple classes

div.custom-class

<div className="custom-class"></div>

Multiple classes
h1.title.title--primary

<h1 className="title title--primary"></h1>

- Nested tags: ‘>’ is used to nest different elements

section>div.card>h1.title

<section>
	<div className="card">
		<h1 className="title"></h1>
	</div>
</section>

- Siblings tags: ‘+’ is used to create siblings elements

header+main+footer

<header></header>
<main></main>
<footer></footer>

- Grouping tags: ‘()’ is used to group elements

nav>ul>(li>a)*4

<nav>
	<ul>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
	</ul>
</nav>

- Repeat elements or groups: ‘*’ is used to generate elements or groups

div.container>(div.card>(img.image-card+p.description))*3

<div  className="container">
	<div  className="card">
		<img src="" alt="" className="image-card"/>
		<p className="description"></p>
	</div>
	<div  className="card">
		<img src="" alt="" className="image-card"/>
		<p className="description"></p>
	</div>
	<div  className="card">
		<img src="" alt="" className="image-card"/>
		<p className="description"></p>
	</div>
</div>

- Content in elements: ‘{}’ are used to set content inside an element

h1.title{Title}

<h1 className="title">Title</h1>

- Numbering: ‘$’ is used to put numbers in an item

ul>(li.item-$)*3

<ul>
	<li className="item-1"></li>
	<li className="item-2"></li>
	<li className="item-3"></li>
</ul>

- Attributes:’[]’ are used to add an attribute in an element

input[type="password"]

<input  type="password"/>

- Implicit tags: Emmet creates the tags that you want based on the context

.container>ul.list>.item#$*3

<div className="container">
	<ul className="list">
		<li className="item" id="1"></li>
		<li className="item" id="2"></li>
		<li className="item" id="3"></li>
	</ul>
</div>

Using Emmet within styles

You can also use Emmet inside your styles in CSS, SCSS, SASS and other styles files. Using this approach saves you a lot of time, since you don’t have to type long properties and values.

Abbreviation Output
m10 margin: 10px
m10-5-10-5 margin: 10px 5px 10px 5px
m10p5em10rem5 margin: 10% 5em 10rem 5px
p10 padding: 10px
p10-5-10-5 padding: 10px 5px 10px 5px

Cool things to know about Emmet

When you are typing your Emmet abbreviations you can press [Ctrl + Space] in your text editor to see what elements are being generated, as they will be displayed in a popup. You can also create lorem ipsum paragraphs by just typing “lorem” and pressing the Tab key. Check out the Emmet Cheat Sheet for more tips and tricks!