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 Linkedin

READ ALSO

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
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

GraphQL in Ruby on Rails: How to Extend Connections

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

Tetris on Rails

14
.
11
.
2023
Paweł Strzałkowski
Ruby on Rails
Backend
Frontend
Hotwire

EURUKO 2023 - here's what you've missed

14
.
11
.
2023
Michał Łęcicki
Ruby
Conferences

Easy introduction to Connection Pool in ruby

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

When crazy ideas bring great time or how we organized our first Conference!

04
.
12
.
2023
Alexander Repnikov
Ruby on Rails
Conferences
Visuality

Stacey Matrix & Takeaways - why does your IT project suck?

14
.
11
.
2023
Wiktor De Witte
Project Management
Business

A simple guide to pessimistic locking in Rails

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

Poltrax design - story of POLTRAX (part 3)

04
.
12
.
2023
Mateusz Wodyk
Startups
Business
Design

Writing Chrome Extensions Is (probably) Easier Than You Think

14
.
11
.
2023
Antoni Smoliński
Tutorial
Frontend
Backend

Bounded Context - DDD in Ruby on Rails

14
.
11
.
2023
Paweł Strzałkowski
Ruby on Rails
Domain-Driven Design
Backend
Tutorial

The origin of Poltrax development - story of POLTRAX (part 2)

29
.
11
.
2023
Stanisław Zawadzki
Ruby on Rails
Startups
Business
Backend

Ruby Meetups in 2022 - Summary

14
.
11
.
2023
Michał Łęcicki
Ruby on Rails
Visuality
Conferences

Repository - DDD in Ruby on Rails

14
.
11
.
2023
Paweł Strzałkowski
Ruby on Rails
Domain-Driven Design
Backend
Tutorial

Example Application - DDD in Ruby on Rails

14
.
11
.
2023
Paweł Strzałkowski
Ruby on Rails
Domain-Driven Design
Backend
Tutorial

How to launch a successful startup - story of POLTRAX (part 1)

14
.
11
.
2023
Michał Piórkowski
Ruby on Rails
Startups
Business

How to use different git emails for different projects

14
.
11
.
2023
Michał Łęcicki
Backend
Tutorial