paint-brush
Faster HTML And CSS Creation with Emmet by@noomdalv
477 reads
477 reads

Faster HTML And CSS Creation with Emmet

by Vlad Luna SanMarch 7th, 2020
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

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

Mention Thumbnail
Mention Thumbnail

Coin Mentioned

Mention Thumbnail
featured image - Faster HTML And CSS Creation with Emmet
Vlad Luna San HackerNoon profile picture

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!