Before you go, check out these stories!

0
Hackernoon logoFaster HTML And CSS Creation with Emmet by@noomdalv

Faster HTML And CSS Creation with Emmet

Author profile picture

@noomdalvVlad Luna San

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

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

Tags

The Noonification banner

Subscribe to get your daily round-up of top tech stories!