Blazing fast code with Emmet
by Oscar Zambrano
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.
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!
