Blogs

Faster Workflow: Mastering Emmet, Part 1

Tahir Taous
Share

faster coding with Emmet

Emmet is a free plugin for text editors to write HTML and CSS code faster. In this multi-part series, I will show you how to write HTML and CSS code faster then ever with Emmet, profiling all the features of Emmet and how to use syntax, abbreviation and keyboard shortcuts to save your time.

Emmet is a must use web developer toolkit. With Emmet you can rapidly create your markup. You write simple abbreviations and just press Tab or Ctrl+E or any other other supported keyboard shortcut and Emmet expands the simple abbreviations into complex HTML and CSS code snippets. Emmet will make your HTML and CSS workflow much faster.

If you make a lot of HTML templates with nav bars, tables and/or multi column layouts, you will find Emmet immensely helpful. Once you get used to the Emmet syntax, it will change your way of creating web pages. I assure you, you will love Emmet when you use it in your workflow. Emmet may well change your way of writing HTML and CSS code.

You can install Emmet as a plugin available for many popular text editors. Below I’ve listed some of the code editors that support Emmet. Documentation on how to install and use Emmet in eahc of these text editors is available online.

You can view the complete list of supported text editors at http://emmet.io/download/

Many popular online services support Emmet. It means you can write code faster wherever you are. Here are some services that support Emmet.

Why use Emmet?

The answer to that is simple: to make your coding workflow faster. Emmet lets you write lightning fast code. Simple CSS-like abbreviations expand into complex code. You can generate lorem ipsum text easily, use many keyboard shortcuts and much more.

why use Emmet

How Emmet Works?

Emmet uses CSS-like selector syntax, You write CSS-like abbreviations, place your cursor at the end of abbreviation and then press Tab, Ctrl+E or any other keyboard key configured to expand abbreviations into actual HTML code. Emmet expands a into <a href=""></a>. You can also specify values, but if you don’t specify values, <a> will produce <a href=""></a> with tab stops inside each empty attribute. You can insert a target URL and hit Tab to go to the next edit point, where you can insert the next desired value.

How Emmet works

Let’s see another example. If you write 

div#header>h1.logo>a{site Name}

You will have following code:

<div id="header">
	<h1 class="logo"><a href="">site Name</a></h1>
</div>

Expand Abbreviation Function

Abbreviations

Here is a list of some supported operators.


Element : (Div, p, span)
Type the element name and hit Tab to expand.
div will be expanded to <div></div>.

Element with id (div#header, E#id)
# is used to apply id’s to any element.

Element with class (div.container, aside.sidebar)
. is used to apply classes to any element.

Child element div.header>div.main>.post
> is used to create child elements.

Sibling Elements E+N (h1+h2)
+ sign is used to create sibling elements.

Multilpication of Elements li*5
* symbol will create defined multiple numbers of any element. Useful to create list items.

Item numbering li.item$*5
$ symbol create item number. You can use it with * to create multiple items with numbering.
Climb-up: ^ : header>#main^footer
With ^ operator, you can climb one level up the tree and change context where following elements should appear:
Grouping: ()
{} Parentheses can be used for grouping sub-trees in complex abbreviations.
Adding text {} : E{text}
{} is used to add text to an element.

Emmet also offers some more great features that I will discuss in detail later.

CSS Abbreviations

While Emmet abbreviations are good for generating HTML, XML or any other structured markup, they are also very useful for CSS. Emmet provides you with shorthand for CSS properties. For CSS syntax, Emmet has many predefined snippets for properties. you can expand the bd abbreviation to get a border: ; snippet, and br for border-right: ;. You can also specify a value for this property. Just type bl:10 for border-left: 10px;.

If you want to specify multiple values, use a hyphen to separate them: m10-20 expands to margin: 10px 20px;. To specify negative values, precede the first value with a hyphen and all the rest with double hyphens: m-10--20 expands to margin: -10px -20px;

CSS

Actions and keyboard shortcuts

Emmet offers many useful and timesaving actions and keyboard shortcuts. Emmet offers unique tools that can greatly improve your editing experience, and is very helpful when you have to edit your HTML and CSS code to fix bugs and add new features. Some of Emmet’s actions are useful for editing existing HTML code, such as the Wrap with Abbreviation function. With this function you can wrap your navigation items in a navigation menu.

wrap with abbreviations

Some other available actions include:

  • Expand Abbreviation
  • Match Tag Pair
  • Go to Matching Pair
  • Go to Edit Point
  • Update Image Size

We will learn about all of these actions, and more, in forthcoming Parts 2, 3 and 4 of this series.