Faster HTML & CSS coding with EMMET

Published in

Frontend Weekly

6 min readNov 25, 2018

It is no secret that the development area is fully of repetitive and tiresome tasks. To lose less time with these, we can insert in our work routine, tools that make we faster. The “The Front End Automation Guide” intends to share situations that used to disturb my productivity and the tools that solved them. I’m separating technologies by chapters, starting with simpler concepts towards the more advanced.

The original articles are being writed in portuguese, and you can found it on my profile. This is the first article i’ve translated, so if there are any english mistakes, feel free to tell-me, its not my native language, no worries. You can found the original article here.

CHAPTER #1: EMMET

HTML and CSS coding is one of the most present practices in the life of a Front-end Dev, and to speed-up it, we can use the EMMET plugin. This one allows us to write HTML components as if they were CSS selectors, CSS styles with abbreviations and also gives us access to a collection of keyboard shortcuts to manipulate and navigate through the code. EMMET is already present in most modern editors, such as VSCODE, not being necessary its installation. In these cases, just start writing. If your editor don’t have it by default, just download and install the plugin. You can found the files and tutorial on the official website. Let’s stop the litany and learn in practice.

1: Building the HTML basic structure

Just write an exclamation (!) in your file and press enter.

GIF ilustrating the use of exclamation(!) to generate a HTML structure

2: Writing HTML components

Use the syntax of CSS selectors. In my case, I want to build a component that is the summary of a news. This is composed by the tag article with an image, a title and a resume text. So if I write the abbreviation:

article>img+h3+h4

I’ll press enter and get as output:

<article>    
   <img src="" alt="">
   <h3></h3>
   <h4></h4>
</article>

For those who are not very close to CSS selectors: The greater sign (>) indicates that the next items will be inside the tag article (their children) and the sum (+) says that the image, title and resume will be side by side(they will be siblings).
You can also write an abbreviation using the “^” element to raise a level previously descended by “>”. In the abbreviation “div > h4 + h3 ^ div > h4”, for example, these two divs will be sibilings.

3: Building components with attributes

The component’s structure is ready, but it has no contents and attributes. To build this, let’s use the selectors:

# for ids;
. for classes;
{} to insert texts;
[attr=”value”] to any attribute.

To add them in our component, the abbreviation will look like this:

article.news>img.news-img+h3.news-title{title text}+h4.news-resume{resume text}

And result in the following HTML:

<article class="news">
    <img src="" alt="” class="news-img">    
    <h3 class="news-title">title text</h3>
    <h4 class="news-resume">resume text</h4>
</article>

4: Generating a “Lorem Ipsum”

To easier visualize the component, let’s insert a provisory textual content, and in purpose of this there is the Latin text “Lorem Ipsum”. To generate it with EMMET, use the word “lorem” followed by the number of words we want to get. So, the :

article.news>img.news-img+h3.news-title{title text}+h4.news-resume>lorem8

Will generate our summary with a Lore Ipsum text of 8 words.

<article class="news">
   <img src="" alt="" class="news-img">
   <h3 class="news-title">title text</h3>
   <h4 class="news-resume">Lorem ipsum dolor sit amet consectetur adipisicing elit.</h4>
</article>

5: Multiplicating components

Now that we have our component really ready, lets build a list of these, repeating the component. To repeat a group, or in this case our component, let’s use the multiplication operator (*) followed by the number of times the component will repeat. One very useful thing is the default existence of the variable “$” inside repeaters. In this case, each repetition increases +1 on the “$” value.

.news-list>(article.news>img.news-img+h3.news-title{title $}+h4.news-resume>lorem8)*3

The result of the above abbreviation are 3 divs, with titles followed by the component’s position, which has been increased from 1 to 3. Also note that I made use of parenthesis, to emphasize that what will be multiplied is just the article component.

<div class="news-list">//Repetição 1
  <article class="news">
      <img src="" alt="" class="news-img">
      <h3 class="news-title">title 1</h3>
      <h4 class="news-resume">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</h4>
   </article>//Repetição 2
  <article class="news">
      <img src="" alt="" class="news-img">
      <h3 class="news-title">title 2</h3>
      <h4 class="news-resume">Accusantium quas, odio inventore pariatur.</h4>
</article>//Repetição 3
  <article class="news">
      <img src="" alt="" class="news-img">
      <h3 class="news-title">title 3</h3>
      <h4 class="news-resume">Repudiandae qui totam minus, quam eum et rem.</h4>
   </article></div>

Note: In some cases you can use implicit tags. The “.new-list” abbreviation, for example, creates a div with the news-list class. This is because the parent element is block type. The same also works for:
li in ul and ol tags;
tr in table,tbody, thead and tfoot tags;
td in tr tags;
option in select and optgroup tags.

6: CSS Abbreviations

EMMET also helps with CSS coding, allowing to type styles with abbreviations. Since they are hundreds (or thousands) of abbreviations, I will not quote them, but you can find them in this EMMET code sheet. Just scroll the page to the CSS section and there will be several columns, with the abbreviation on the left and the expected result on the right. This site also has everything I’ve explained so far and more, that’s where I’m taking most the content.

Print Screen of Emmet Official Cheat Seet

7: CSS Vendor Prefixes

Putting “-” (dash) before the abbreviation, it will be automatically generated with all vendor prefixes.

GIF ilustrating the use of the -trf abbreviation

OMG! The value doesn’t work as expected and we need to change it. So, we need to change one by one? No! let’s just modify one of those and press the shortcut “Reflect CSS Rule” (Default: Ctrl + B).

GIF ilustrating the use of the shortcout “Reflect CSS Rules”

8: Manipulating and navigating throug the code

I’ve listed below some EMMET shortcuts that mose use in my routine

Remember: For those who use the VSCODE editor and similars, the shortcuts may be different or not configured by default. To check or change the binding key, go to file> preferences> keyboard shortcuts, search for EMMET and all the available EMMET commands will be listed. Then just choose the keys you prefer.

Balance/(Ctrl + D) e (Shift + Ctrl + D): Selects the code intelligently, respectively by expanding and compressing the selection.

GIF ilustrating the shortcuts (Ctrl + D) and (Shift + Ctrl + D)

Remove Tag/(Ctrl + K): Removes/delete a tag.

Merge Lines/(Shift + Ctrl + M): Join the selected rows.

GIF ilustrating the shortcut (Shift + Ctrl + M)

Toggle Comment/(Ctrl + /): Make a line a comment.

GIF ilustrating the shortcut (Shift + /)

Evaluate Math Expression/(Shift + Ctrl + Y): Solve a mathematical expression.

GIF ilustrating the shortcut (Shift + Ctrl + Y)

This is what I have to show you today, I’m sure this tool will greatly increase the productivity of your coding. If this article was really useful for you, do not forget to leave an applaud, just logging on Medium and clicking on the hand below! Any doubt, review or suggestion and ideas for future chapters, feel free to leave comments. You can also find me on social networks to exchange ideas or questions(I also accept proposals for remote work, LOOL)!