It’s true what they say about old dogs and new tricks. I have to admit I’m not the most embracing when it comes to trying out new ways to code. However I quickly fell in love with one Emmett (aka Zen Coding) as soon as I saw their intro video on their website.

Before I go one with the review, let me clear something up – this is NOT a preprocessor or anything close to one. It does not create a level of abstraction  It does not require multiple files or to be compiled from one file type to another. Someone who doesn’t use or know about Emmett will not have an issue editing files, because it doesn’t actually mess with, or change anything at all.

Instead, Emmett is closer to those code snippets you save in your IDE or on some website, except for the fact that they’re dynamic. You know how when, in your favourite IDE, you’re coding, little windows come up that try to guess what you’re typing to allow you to code faster? Or when your IDE closes your tags for you? Multiple that by about 1000 and you’ve got Emmett.

The best part (and the part I’ve used the most so far) is typing up CSS-like declarations to get an entire HTML structure. For example:

html>head+body>header+section>article+aside

Looks like some super over-specific CSS right? However, upon hitting “tab”, it is immediately expanded to:


<html>
	<head></head>
	<body>
		<header></header>
		<section>
			<article></article>
			<aside></aside>
		</section>
	</body>
</html>

Pretty much an entire basic HTML structure written in seconds!

Emmet comes built with a ton of awesome features: a lorem ipsum generator, vendor prefixes (so you don’t have to type them all out in CSS) and a ton of other stuff I still haven’t even learned yet.

Another cool feature is the multiplication feature, which is great when doing redundant HTML like lists. For example:

ul>li*5

Outputs as

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Too handy! Emmett also has some really awesome select features, that allow you to quickly selecting matching tags. You can also very quickly toggle comments on and off, great if you have a huge chunk of code that you want to quickly comment out.

The hardest thing about Emmett is learning and memorising all that it does! So far I’ve only really worked with the basic HTML abbreviations and multiplication features, but I’m hoping to eventually learn the rest of the features.

The most disappointing feature though, and one that would’ve been super helpful if it worked correctly, was the evaluate math expression. What it does is basically replaces a math statement with the value, so if you wrote 4/2, it would replace it with 2. I bet you’re thinking the same thing I originally was….what a PERFECT feature for responsive web design, right? No more switching back and forth between calculators, right? Well unfortunately…no. Emmett will only output whole numbers, so your calculations will be rounded up or down and your website grid off. Bummer. Maybe they’ll see this and add that feature in? I would gladly pay for it!

Emmett works with almost every awesome IDE out there, and it’s something I highly recommend you try! Check it out here.

Amber Weinberg

Amber is a freelance front-end developer specializing in semantic and accessible custom WordPress themes. She works with agencies and other freelancers to bring their designs to life using custom ACF flexible layout builds - making them more performant and less buggy while allowing the client easy customization without breaking the design system.