477 reads

Faster HTML And CSS Creation with Emmet

by Vlad Luna SanMarch 7th, 2020

Too Long; Didn't Read

Emmet is a tool designed to help developers save time while writing HTML and CSS. Emmet includes abbreviations for every HTML tag and includes CSS abbreviations. The tool 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. You can also chain abbreviations with a CSS look-alike syntax, with the help of the "! " shortcut.

Companies Mentioned

Coin Mentioned

featured image - 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