20 Best Emmet Tips to Help You Code HTML/CSS Crazy Fast

Emmet, previously known as Zen Coding, is one of best tool you should have to increase your productivity while coding HTML or CSS. It works just like code completion, but it’s more powerful and amazing. It is able to automate your HTML/CSS from a simple form to the complex one.

Emmet offers good support for text editor or IDE (Integrated Development Environment) such asDreamweaver, Eclipse, Sublime Text, TextMate, Expresso, Coda, Brackets, Notepad++, PHPStormand many more. It also support online editing tool likeJSFiddle, JSBin, CodePen, IceCoderandCodio.

The way of Emmet works is by typing your tab keyboard key when done writing syntax. The following are most common Emmet symbols that you can used. To see them in action, please continue reading.

Emmet – HTML Best Tricks

You’ll be amazed when writing HTML with Emmet like I did. As stated earlier, Emmet is able to abbreviate a simple HTML to very complex one. And they are written only on a single line of code. By default, if you abbreviate unknown tag name, Emmet will automatically write the tag you write. See animation below to easily understand it.

1. Nesting

To nest some elements you just need to add larger sign>after each tags you want to used. For instance, when I want to have aheaderwithnav,div,ulandliinside I just need to typeheader>nav>div>ul>liand the hit tab key.

2. Sibling

If you don’t want to nest your elements, you can simply use a plus+sign followed by tags you want to add. Example, theheader+section+article+footerwill give a different place forheader,section,articleandfooter.

3. Climb Up

When you are inside a child element and want to have another element outside that child, you can easily climb up one element with^sign. If you type it twice, then you’ll climb double element and so on. For example, if you typeheader>div>h1>navyou’ll have the nav element still inside the h1. To get it out, just replace the last>sign with^.

4. Add Class

Emmet is also able to include your prefered class name within the tag. The sign you’ll use is the same like class selector in CSS that is a dot.sign. For example, if I want to have adivwith.containerclass,h1with.titleandnavwith.fixed, then I just have to writediv.container>header>h1.title+nav.fixed.

If you want to have more than one class inside, then type your additional class after the first class along with the dot.sign. Example:div.container.centerwill produce.

5. Add ID

Besides class, you can also add an ID inside your tag with#sign. The usage is the same like adding class but you may not type double ID inside. If you try to do so, Emmet will only read the last ID you type.

6. Add Text

Emmet is not just that simple as just abbreviate some tags, you can even add line of text inside. To add some text, you just have to wrap the text with curly bracket{}sign. You don’t need to add a larger>sign as the text will automatically be added inside the tag.

7. Add Attribute

If you want to add another attribute apart from class and id, just place attribute you want to add inside bracket[]sign. For instance, I want to have an image which has logo.png source with logoalt, so I just typeimg[src=“logo.png” alt=“logo”].

8. Grouping

When you want to have an element with multiple nested inside, then grouping them with()sign will help you achieve this easily. Example, I want to have a container that has header with h1 and nav inside and another section outside the header, I will simply write:.container>(header>h1+nav.fixed)+(section>.content+.sidebar).

9. Multiplication

This feature may become one of your favourite from Emmet. As with multiplication, we can multiply any element as much as we want. To use it simply add a starsign after element you want to multiply and add the number of the element. For instance, I want to write five li item inside ul, then the right syntax isul>li5.

10. Automatic Numbering

Automatic numbering will help you easily write different name with increasing number. The right syntax for this feature is a dollar$sign. Auto numbering is best used with multiplication. Example, I want to add my previousliitem with a class fromitem1toitem5. So, I just have to add additional class name with dollar sign:ul>li.item$*5.

11. Lorem

If you used to write some dummy text by opening lipsum generator like lipsum.com, with Emmet you don’t need to do it anymore. Emmet also support dummy text generator withloremorlipsumsyntax. You can also specify how long your text will become. For instance, I want to have some text with 10 word long, then I will typelorem10.

12. Auto Document

When you are starting a new project, instead of writing the html structure manually or copy pasting from other resources, Emmet can do it for you better. All you need to do is typing an exclamatory!sign, hit tab and the magic happen. That will generate a HTML5 document structure for you, if you want to use a HTML4 instead, then just typehtml:4t.

13. Link

If you have a favicon, rss or external CSS file you want to add to your document, you can use link tricks to write them faster. To include a favicon, typelink:faviconthen it will generate you a favicon link with defaultfavicon.icofile name inside. And for css,link:csswill generate you a CSS link with defaultstyle.cssstyle name inside. And RSS will berss.xmlas the default name.

You can combine them with plus+sign to generate a faster resources.

14. Anchor

By default, when you typeatag then hit tab, you will get a completeatag withhrefattribute inside. But you can add ahttp://value if you combine it with link for instancea:link. And if you want to have a mail link instead, then usea:mail.

15. Smart Skipping

The last HTML tricks I will give you is the smart skipping feature. Basically, you don’t have write the tag name when you want to have class or id inside it. This apply only on some certain condition.

First, if you want to have adivwith ID or class inside, you don’t need to write the tag name, just directly write id or class symbol along with its name.

Second, when you are inside aultag, you skip writing thelitag if it has a class or id.

And the last is applied withintabletag. You can skip writingtrandtdtag if they have class or id and Emmet will automatically add them for you.

Emmet – Best CSS Tricks

After you learn some of HTML tricks, now it’s time for the CSS. Some of common symbol shown in the top image will not work with CSS.  They are larger>and climb up^symbols. If you use them, they will produce just like plus+symbol. So, let’s get going.

1. Width & Height

Definingwidthandheightwith Emmet is very easy. You just have to write the first word of them followed by the size you want to add. By default, if you don’t specify the units, Emmet will generate them withpxunit. The available unit symbol is percent%andem.

2. Text

There are some easy to use text property symbol and will be generated with default value.tawill generatetext-alignwithleftvalue,tdwill betext-decorationwithnonevalue andttwill becometext-transformwithuppercasevalue.

3. Background

To add background, simply usebgabbreviation. You can combine it withbgito getbackground-image,bgcforbackground-colorandbgrforbackground-repeat. You can also writebg+to get a full list of background property.

4. Font Face

The plus sign isn’t just applicable for background. For@font-face, you can simply write@f+for a complete list of@font-faceproperty. If you type@fwithout plus sign, then you’ll get a basic@font-faceonly.

5. Miscellaneous

Other great tricks are you can abbreviate writinganimationwithanimtext. If you add a minus-sign, you’ll get animation property with full value. There is also@kftext that will produce full list of@keyframe.

SEE ALSO:Top 15 Free PHP Frameworks for 2015

Conclusion

Emmet is a very huge time-saving tool to streamline your development process. If you just know Emmet, it’s not too late to try it now. Those tricks are just some of Emmet features. There are ton of other symbol and syntax in Emmet, especially for CSS. Just head over to Emmetdocsorcheat sheetto further your reading.

Irfan Fauzi

Irfan is a design, tech and Android enthusiast. One of WebHozz’s Web Creative trainer that appreciates much on minimalist and clean design. Movie and football lovers and enjoy to travel around in his free time.

Add new comment

Name

Email ID

Δ