14
.
11
.
2023
16
.
01
.
2015
Frontend
Tutorial

Emmet makes HTML and CSS easier

Michał Piórkowski
Founder

So I was sitting at work, wondering how I ended up doing some email template that had to be written in pure HTML. No HAML allowed. And than, my co-worker showed me Emmet. When I looked at it, I almost cried thinking about all these hours I used to spend on writing full-blown HTML code.

But lest's rewind.

How it all started

So few years back I started coding (HTML and PHP). Those were some hard times, as many of front-developers would probably recall. Later on I discovered HAML and my life has changed. But there was one problem. I was working on Windows and Linux symultaniously. So I could use HAML syntax but only in RAILS projects which were hosted on virtual machine. But as for the projects I was doing on Windows (due to many reasons) I was stuck with the old ways. I could use SASS, but it was only half of success, besides, even on LINUX there was a small problem when long lists or multiple elements had to be created.

I admit it - I am lazy. If I can cut down my typing even by 20% - I will do everything I can to achieve it.

Enlightenment

So I found emmet. Many of the programmers said "big whoop, you already had HAML, so what is the big difference". But they do not know the struggle of creating a list of 10 elements, and having to write it down, or use ctrl+c+v mechanism. I do not even start to describe the horror of creating HTML files for email marketing purposes.

The tool itself

So the authors are very modest and say:

Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow

And in general - they are right. Emmet lets you write css-like code in order to create full-blown HTML or nice HAML. It also allows you to create CSS in a faster way, as it offers you many convenient shortcuts.

And suprisingly, there is nothing more to it. It is plain and simple, but what could we demand more?

Examples

OK, enough talking, let's see some examples

Imagine you have to create a typical menu syntax - in HTML.

#page>div.logo+ul#navigation>li*5>a{Item $}

will convert into

<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
    </ul>
</div>

Amazing, huh?

Every > sign makes you go deeper. Every + creates a sibling element. But what happens if you decide to go up?

div+div>p>span+em^bq

compiles to

<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

Grouping elements?? No problem:

div>(header>ul>li*2>a)+footer>p

will give you

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

Custom attributes?

td[title="Hello world!" colspan=3]

I dare you.

<td title="Hello world!" colspan="3"></td>

And one of the best - Lorem Ipsum

p*4>lorem

Try it, and see what happens.

HAML user?

#content>p.title|haml

Tab key

#content
    %p.title

That is cute, but what about CSS?

Yeah, actually converting css-like syntax seems like a stupid idea for creating css. But there is something that Emmet Creators have to offer.

Let's say you need your favourite margin: 10px 20px 10px 10px; syntax.

m10-20-10-10

And youre done.

But wait, what about em and %?

Type p,e,x to find out. Each of them expands into other unit.

Color values? Absolutely sir!

#1 → #111111
#e0 → #e0e0e0
#fc0 → #ffcc00

And at last but not at least - that horrible !important selector.

p10p!+m10e!

will give you

padding: 10px !important;
margin: 10em !important;

HTML, HAML, CSS and ....ACTIONS

Besides HTML/HAML and CSS snippets there are also some pre-defined actions. Since they are harder to describe here I will jest mention few of them and suggest visiting "docs" section on emmet.io. Sample actions:

CTRL+/ will comment selected tag out
CTRL+K will remove the selected tag but will not remove its content
Shift+Ctrl+U will update width and height attributes in selected img (HTML) or url (CSS) tag

That's all folks

I could give you countless number of examples, but the best way to know any tool is to use it, so dig in at: Emmet.IO

Michał Piórkowski
Founder

Check my Twitter

Check my Linkedin

Did you like it? 

Sign up To VIsuality newsletter

READ ALSO

Recap of Friendly.rb 2024 conference

Insights and Inspiration from Friendly.rb: A Ruby Conference Recap

02
.
10
.
2024
Kaja Witek
Conferences
Ruby on Rails

Covering indexes - Postgres Stories

14
.
11
.
2023
Jarosław Kowalewski
Ruby on Rails
Postgresql
Backend
Ula Sołogub - SQL Injection in Ruby on Rails

The Deadly Sins in RoR security - SQL Injection

14
.
11
.
2023
Urszula Sołogub
Backend
Ruby on Rails
Software
Michal - Highlights from Ruby Unconf 2024

Highlights from Ruby Unconf 2024

14
.
11
.
2023
Michał Łęcicki
Conferences
Visuality
Cezary Kłos - Optimizing Cloud Infrastructure by $40 000 Annually

Optimizing Cloud Infrastructure by $40 000 Annually

14
.
11
.
2023
Cezary Kłos
Backend
Ruby on Rails

Smooth Concurrent Updates with Hotwire Stimulus

14
.
11
.
2023
Michał Łęcicki
Hotwire
Ruby on Rails
Software
Tutorial

Freelancers vs Software house

02
.
10
.
2024
Michał Krochecki
Visuality
Business

Table partitioning in Rails, part 2 - Postgres Stories

14
.
11
.
2023
Jarosław Kowalewski
Backend
Postgresql
Ruby on Rails

N+1 in Ruby on Rails

14
.
11
.
2023
Katarzyna Melon-Markowska
Ruby on Rails
Ruby
Backend

Turbo Streams and current user

29
.
11
.
2023
Mateusz Bilski
Hotwire
Ruby on Rails
Backend
Frontend

Showing progress of background jobs with Turbo

14
.
11
.
2023
Michał Łęcicki
Ruby on Rails
Ruby
Hotwire
Frontend
Backend

Table partitioning in Rails, part 1 - Postgres Stories

14
.
11
.
2023
Jarosław Kowalewski
Postgresql
Backend
Ruby on Rails

Table partitioning types - Postgres Stories

14
.
11
.
2023
Jarosław Kowalewski
Postgresql
Backend

Indexing partitioned table - Postgres Stories

14
.
11
.
2023
Jarosław Kowalewski
Backend
Postgresql
SQL Views in Ruby on Rails

SQL views in Ruby on Rails

14
.
11
.
2023
Jan Grela
Backend
Ruby
Ruby on Rails
Postgresql
Design your bathroom in React

Design your bathroom in React

14
.
11
.
2023
Bartosz Bazański
Frontend
React
Lazy Attributes in Ruby - Krzysztof Wawer

Lazy attributes in Ruby

14
.
11
.
2023
Krzysztof Wawer
Ruby
Software

Exporting CSV files using COPY - Postgres Stories

14
.
11
.
2023
Jarosław Kowalewski
Postgresql
Ruby
Ruby on Rails
Michał Łęcicki - From Celluloid to Concurrent Ruby

From Celluloid to Concurrent Ruby: Practical Examples Of Multithreading Calls

14
.
11
.
2023
Michał Łęcicki
Backend
Ruby
Ruby on Rails
Software

Super Slide Me - Game Written in React

14
.
11
.
2023
Antoni Smoliński
Frontend
React
Jarek Kowalewski - ILIKE vs LIKE/LOWER - Postgres Stories

ILIKE vs LIKE/LOWER - Postgres Stories

14
.
11
.
2023
Jarosław Kowalewski
Ruby
Ruby on Rails
Postgresql

A look back at Friendly.rb 2023

14
.
11
.
2023
Cezary Kłos
Conferences
Ruby

Debugging Rails - Ruby Junior Chronicles

14
.
11
.
2023
Piotr Witek
Ruby on Rails
Backend
Tutorial