Emmet Tips and Tricks
Emmet is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow by using abbreviations. Abbreviations are the heart of this tool, these special expressions are parsed in runtime and transformed into structured code block increasing productivity by helping you save coding time. It’s available for most text editors and IDEs, therefore wildly use.
The idea of this post is to give you a headstart with emmet and go over some basic but very important abbreviation.
Emmet Abbreviations
HTML Structure
Emmet provides a very easy way to write the basic structure of your HTML documents by using the ! abbreviation. What could be more exciting than that?
Elements Tag
Emmet also provides an abbreviation for creating elements in many ways.
Single Element
Single Element with a class
Single Element with an Id
Single Element with attribute
Children
Emmet abbreviation also includes creating elements with their children.
Multiplication
Emmet also allows multiplication using * keyword, very useful when creating a list.
Siblings
Emmet also provides a way to create sibling elements using the + keyword.
Grouping
Emmet allows grouping, in order to use the multiplication technique in several elements.
Climbing Up
After creating nested elements you might want to climb back up in the hierarchy of your document, Emmet allows you to do that by using ^ keyword.
Text
You can insert text in your abbreviations by using {}.
CSS
Emmet also facilitates the CSS work.
