Faster HTML And CSS Creation with Emmet

Emmet is a tool designed to help developers save time while writing HTML and CSS by encapsulating pieces of code and loading them with the help of easy shortcuts, here's an example:

Lets say you are beginning a new HTML project, the first thing you do is create an index.html file, with the help of Emmet you can instantly have at your disposition an HTML boilerplate with the " ! " shortcut:

Then we press the TAB key to expand the code and voila!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
	
</body>
</html>

Emmet includes abbreviations for every HTML tag:

div expands to <div></div>
a   expands to <a href=""></a>
br  expands to <br />

Emmet comes pre-equipped with CSS abbreviations as well, here are a few examples:

pos  = position
bg   = background
m    = margin
c    = color
fl:l = float-left
fl:r = float-right

Chain Abbreviations

You can also chain abbreviations with a CSS look-alike syntax,

Lets imagine we are going to create a form with an email as input:

form:post#sample-form>label[for=email]+input#email+button:s

This creates a
```
form
```
with
```
method="post"
```
and
```
id="sample-form"
```
, we pass the
```
>
```
character to create child elements, the first one is a label, then we add an
```
input
```
with
```
id="email"
```
and a
```
button 
```
with
```
type="submit"
```
:

<form action="" method="post" id="sample-form">
  <label for="email"></label>
  <input type="text" id="email">
  <button type="submit"></button>
</form>

Creating an enumerated list with this chained abbreviations

#wrapper>ul#sample-list>li.item-$*3>{Item $}

Here
```
#wrapper
```
creates a div element with
```
id="wrapper"
```
then we pass the
```
>
```
character to reference
```
#wrapper
```
children elements, then we create an unordered list or
```
ul
```
element with
```
id="sample-list"
```
and then we pass the
```
>
```
character again to create list-item or
```
li
```
elements inside the
```
ul
```
, to end things we give every li element a
```
class="item-(1,2,3)"
```
where
```
$
```
becomes
```
(1,2,3)
```
respectively:

<div id="wrapper">
  <ul id="sample-list">
    <li class="item-1">Item 1</li>
    <li class="item-2">Item 2</li>
    <li class="item-3">Item 3</li>
  </ul>
</div>

Setup / Installation

Fortunately Emmet is already built into some of the most used text editors, if your favorite text editor doesn't come with it, you can also download it as a plugin and check for specific instructions from their website.

Links

Emmet Download https://emmet.io/download/
Emmet Documentation https://docs.emmet.io/
Cheat Sheet https://docs.emmet.io/cheat-sheet/

If you made it this far i hope this article helped you in one way or another, thanks for reading!