Se o nosso viajante do tempo favorito fosse programador (muito provavelmente era), ele certamente usaria o Emmet, uma ferramenta indispensável que é utilizada por muitos desenvolvedores experientes.

Ele não é um pré-processador como o LESS, porém ele abrevia o modo como você escreve o HTML e CSS, pra que você se torne mais rápido ao codificar. Escrito em Javascript puro (SIM JAVASCRIPT <3) e podendo funcionar em diferentes plataformas, a ferramenta foi desenvolvida para os editores de códigos mais utilizados do mercado, como o Sublime Text, Notepad++, Atom, Eclipse, Coda, Komodo Edit, NetBeans, Dreamweaver (que morte horrível) e o meu xodó o Brackets.

 

Mas o que exatamente o Emmet faz?

O site do Emmet.io diz: Abbreviations are the heart of the Emmet toolkit

O que o Emmet faz de melhor é abreviar. Os snippets são totalmente dinâmicos. A medida que você escreve e aperta a tecla tab, a abreviação em Emmet é transformado na hora. Veja um exemplo bem simples:

Para um criar um documento HTML5 utilizando a abreviação Emmet, digite apenas html:5 e tecle tab e a magica acontecerá!

 

Para nomear um elemento com classe, basta utilizar um ponto antes do nome, como no CSS. O mesmo vale para criar o elemento com ID, basta digitar o # antes do nome e teclar tab sempre. O sinal de >, serve para aninhar elementos, assim como o sinal de ^ serve para sair do aninhamento anterior. Exemplo: .menu>.item>a^.item2>h2

Parece complicado, mas com o passar do tempo e com prática, acaba ficando mais simples. No CSS, a ferramenta ajuda bastante na hora de escrever as propriedades. Pra quem já sabe decor e salteado quase todas as propriedades do CSS, fica mais fácil até de deduzir qual abreviação utilizará para escrever o código.

#elemento { w200+h100+pos-a+t0+l0 //tecle tab depois de escrever isso }

Resultará nisso:

#elemento { width: 200px; height: 100px; position: absolute; top: 0; left: 0; }

 

 

O Emmet possui muitas abreviações e ainda permite que você mesmo crie suas próprias. Na documentação você pode ler todas as abreviações disponíveis.