Write faster HTML and CSS with Emmet

Here’s how you can reach productivity Nirvana. Through [Emmet’s](“http://emmet.io/") fuzzy, css-like abbreviations you will be able to write your CSS and HTML much more efficiently.

Emmet is a plugin for your text editor that allows to write your HTML and CSS much faster with css-like abbreviations and fuzzy search expansion. Check the playable demo [Emmet documentation](“http://docs.emmet.io/").

Hayaku does nearly the same, only for CSS. If you prefer Hayaku’s way of dealing with CSS, you can have them running side by side without problems. I only use Emmet.

And I really recommend devoting an hour’s time to learn it. It will pay you back in gazillions. Promise. Most recommended.

CSS examples

In a CSS file, write oh, press tab and Emmet will expand it to overflow: hidden;. Write ml1.5r, press tab –> margin-left: 1.5rem;

HTML examples

In a HTML document, write #Blondie>figure.Logo+ul.Navigation>li*4>a{Item $} followed by tab again and you will get:

`HTML

Easy and fast. More on the HTML syntax in Emmet.

Also see Emmet Cheat Sheet