Zen Coding – How to speed up your markup with Emmet

Zen Coding – How to speed up your markup with Emmet

If you haven’t heard about Zen Coding or Emmet, you’ve probably been writing your markup in the dark. It’s time to put some light to your development workflow. Zen Coding and Emmet help you write your markup more quickly. In 2008 Vadim...

If you haven’t heard about Zen Coding or Emmet, you’ve probably been writing your markup in the dark. It’s time to put some light to your development workflow. Zen Coding and Emmet help you write your markup more quickly.

In 2008 Vadim Makeev started to write the open source project – Zen Coding, which allows you to transform CSS rules to HTML markup. This project later changed its name to Emmet.

zen coding emmet

We’ve all been writing markup that feels like it takes ages to write, a lot of tags, rules, classes, ids and text. It takes time and it is so frustrating when a closing tag doesn’t mach a start tag. To write markup character by character takes time. Having a good code-editor makes it much easier. Using Zen Coding makes it a dance.  So how does it work?

CSS roles to HTML markup

It’s beautiful in its structure and I will let this example demonstrate that.

ul.my-list>li.my-list-item*10

This will result in a ul list with with 10 li tags. Each one with given class name.

<ul class="my-list">
    <li class="my-list-item"></li>
    <li class="my-list-item"></li>
    <li class="my-list-item"></li>
    <li class="my-list-item"></li>
    <li class="my-list-item"></li>
    <li class="my-list-item"></li>
    <li class="my-list-item"></li>
    <li class="my-list-item"></li>
    <li class="my-list-item"></li>
    <li class="my-list-item"></li>
</ul>

Easy? Let’s look at one more…

article.my-article>header#my-header>h1+span.my-header-author
// Will give you...
<article class="my-article">
    <header id="my-header">
        <h1></h1>

    </header>
</article>

You are probably now starting to get the Zen coding logic. It pretty much works the way we’re used to doing things with CSS.

  • A . will add a class to the element.
  • A ## will add an id to the element.
  • A > will make the right element to a child of the left element.
  • A + will make the right element to a sibling to the left element.
  • A *[number] will loop the element [number] of times.

OMG Zen coding is MAGIC. I want the magic now.

First of all. Calm down, I know it’s exciting.

Zen coding / Emmet is well supported across many code editors since it’s written in Javascript and is easy to implement. Shortcuts are different for each plugin. For example, in Sublime you can put the cursor at the end of the line and hit ctrl+e to apply magic… after you have installed the plugin.

You can find a list of plugins for different text editors at emmet.io/download/.

code visual studio code visual studio

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

COMO USAR e trabalhar com Code Review no Visual Studio Code

💲 Live CollabPlay: https://youtu.be/B6LCFSPdsE0 💲 Hospedagem com Desconto Exclusivo: https://tekers.tech/4e587 Não é todo programador que gosta de compartilh...

User Snippets (Code Shortcuts) in Visual Studio Code

#vscode Hello, my friends and fellow developers, this video is all about User Snippets. That means the Snippets (Code Shortcuts) that you can make for yourse...

Python в Visual Studio Code

We are pleased to announce that the July release of the Python extension is now available for Visual Studio Code. You can download the Python extension from the Marketplace, or install it directly from the extension gallery in Visual Studio Code. If you already have the Python extension installed, you can also get the latest update by restarting Visual Studio Code. You can read more about Python support in Visual Studio Code in the documentation .

C++ Development with Visual Studio Code

If you’re looking for a fast and lightweight open-source code editor, Visual Studio Code has you covered. Come for a deep dive into the features of Visual Studio Code which provide a rich, productive environment for C++ development.

The History of Visual Studio Code

We speak to the creator of Visual Studio Code about the early challenges to now becoming the most popular development environment in the world.