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; }
Chorra, Godrix!
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.
