Bits Kingdom logo with a hexagon lattice, uppercase text in white, and a minimalistic design.

Slow at writing code? This tip is for you!

Learn how to boost your code-writing speed!

by Nov 3, 2022Development

Home / Development / Slow at writing code? This tip is for you!

Is Efficient Just a Fancy Word for Lazy?

We’ve all heard it before: “Plan more, code less,” or “Quick fixes will come back to haunt you.” Yada yada yada…

And sure, there’s truth there. Every dev loves a shortcut, especially one that’s fast, clean, and doesn’t blow up in your face later.

Good news: we’ve got one.

What Is Emmet and How It Helps You Code Faster

If you haven’t met Emmet, get ready — this little plug-in is about to change your life.

Emmet is a powerful plugin originally developed by Sergey Chikuyonok, born out of a project called Zen Coding. Its mission? To make front-end developers ridiculously fast at writing HTML and CSS. And honestly, it delivers.

Emmet works by transforming simple, CSS-like abbreviations into full-blown code snippets. You type a tiny string, hit Tab, and boom — instant markup. No repetitive typing, no wasted keystrokes, just clean, valid code in seconds.

Best Text Editors and Platforms That Support Emmet

Emmet works across a ton of editors: Sublime Text, Atom, Brackets, Notepad++, VS Code… even online darlings like CodePen, JSFiddle, and JS Bin. Most of the time, you don’t even need to install anything — Emmet ships with many editors by default.

Here’s what makes it great:

  • Speed: Cut down your typing time by 50–70%. Seriously.
  • Smart abbreviations: Nest elements, add IDs, classes, siblings, and text content — all in a single line.
  • Customizable: You can tweak or extend Emmet to match your specific coding style.
  • Wide support: HTML, CSS, JSX, LESS, Sass… Emmet plays well with modern front-end stacks.

Whether you’re building websites from scratch or rapidly prototyping layouts, Emmet gives you Jedi-level control over your code editor.

Emmet Abbreviation Examples for HTML and CSS

HTML Emmet abbreviation example:

.container.container-fluid>(header>ul#my-list>li.item$$*5>a{Item $$})+footer>p{My list}

HTML code expanded:

<div class="container container-fluid">
  <header>
    <ul id="my-list">
      <li class="item01"><a href="">Item 01</a></li>
      <li class="item02"><a href="">Item 02</a></li>
      <li class="item03"><a href="">Item 03</a></li>
      <li class="item04"><a href="">Item 04</a></li>
      <li class="item05"><a href="">Item 05</a></li>
    </ul>
  </header>
  <footer>
    <p>My list</p>
  </footer>
</div>

CSS Emmet abbreviation example:

h1 {
fs12r
fwb
w100p
c#333
lh1.2
p10
ml15
tac
dib
}

CSS code expanded:

h1 {
  font-size: 12rem;
  font-weight: bold;
  width: 100%;
  color: #333;
  line-height: 1.2;
  padding: 10px;
  margin-left: 15px;
  text-align: center;
  display: inline-block;
}

Conclusion: Speed Up Your Code Writing Today

We hope this little trick helps you write better, faster, and with fewer caffeine-fueled all-nighters. Want more like this? Check out our expert article on 3 ways to create a loop with WordPress.

Because let’s face it — the best coders are the ones who work smart and fast.

About the author

<a href="https://bitskingdom.com/blog/author/diego/" target="_self">Diego De Dieu</a>
Diego De Dieu
I am a Full-Stack Developer with over 10 years of experience. As a passionate self-learner, I’ve built my expertise through online courses, research, and hands-on project work. I’m deeply invested in staying current with the latest trends in design, development, and technology, always striving to learn new tools and stay at the forefront of the industry.

Explore more topics:

CSS3 Mastery: 15 Essential Tips to Enhance Your Designs

Secrets of CSS3 for spectacular web projects