Blazing fast code with Emmet

Emmet is a powerful plugin for web developers that can be used in many text editors, and allows us to type abbreviations and display code in html, jsx, css, sass and others, in an easier and faster way. Emmet is installed by default on 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 of 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!