Hey! Se eu falar que você está disperdiçando vida útil dos seus dedos e teclado, além, claro, de tempo da sua vida ao digitar HTML e CSS normalmente?

Pois é! Digitar cada caractér de uma tag, cada propriedade e valor de um css é bem anti-produtivo. Se você nunca pensou nisso, agora vai ver.

Esse é mais #1postperday e dessa vez eu trago - pra quem não conhece - uma dica de produtividade!

O problema:

Repetição. O grande inimigo da produtividade. Se você precisa fazer uma coisa mais de 2x, talvez seja bom otimizar/automatizar o processo.

Escrever o markup básico de um layout pode ser bastante cansativo. entre <, “, = e / , veja quantas posições diferentes seus dedos fazem.

A solução:

Em meados de 2011 eu conheci um plugin que mudou minha vida. Chamado, na época de Zen Coding foi uma daquelas descobertas em que me peguei comemorando sozinho em voz alta - enquanto minha família me olhava perplexa e pensava em me internar :P

Sem mais delongas, vamos à prática!!

O que é o Emmet?

Emmet é um plugin - com suporte à diversos editores - cuja função é trabalhar com atalhos para digitação de HTML e CSS. Vou mostrar com exemplos, mais abaixo.

Como instalar

No site official emmet.io existe uma relação de editores suportados. **Além dos editores suportados, os derivados deles (exemplo: Aptana é derivado do Sublime) também devem funcionar.

Normalmente, o fluxo de instalação é:

  1. Acesse o Package Manager (ou Package Controll) do seu editor

  2. Em Install Packages, procure por emmet e instale.

  3. A instalação manual normalmente consiste em clonar o repositório do plugin para a pasta /plugins do seu editor.

Editores suportados pelo Emmet
Na imagem acima, nem todos tem suporte TOTAL do Emmet. Veja a relação na página oficial.

Exemplos do Emmet para Workflow Ninja HTML

Supondo que já instalou o Emmet e reiniciou seu editor, vamos começar a brincar (^_^)y

  • Estrutura básica HTML5 com 6 letras:

Inicie um novo arquivo HTML (e salve ele). Digite:

1
html:5

e aperte [TAB].

Eiiiiita carái

Eaí, curtiu? hehehe Maneiro né? Talvez tenha que mudar o atributo lang para pt_BR.

Agora , dentro da tag body, digite:

1
div.minhaClasse#meuId>p

e aperte [TAB]. Tá dando pra entender a idéia né?

Criando o markup de um layout em menos de 20 segundos.

Agora apague tudo no arquivo html e digite:

html:5>(header#main-header>img+h1.title)+(div#main-content>div.post*3>h1{post $}+p{lorem ipsilum})+(footer#mainFooter>div>ul>li{link $}*4)

E aperte [tab]. :O u-au.

É, galera o Emmet é foda. Veja abaixo como funciona:

Sintaxe HTML para Emmet:

  • > significa filho de. Se você fizer div>p criará um div com um parágrafo dentro.

  • + significa irmão. Quer dizer que estarão lado-a-lado, dentro do mesmo ‘pai’. Tente div>h1+p

  • ^ Sobe um nível. O elemento será criado um item acima na hierarquiva. Tente article>div>h1+p^img

  • () Grupos. Pra agrupar elementos pais e filhos entre sí, permitindo blocos irmãos com pai e filho. Tente h1+(ul>li)+(ol>li)

  • * Multiplicação. O número de vezes que o elemento será repetido. Tente: ul>li*5

  • $ Enumerar. Enumera, dentro de uma repetição. Tente ul>li{item numero $}*6

  • # e . Id e classe. Tente div.principal>ul.lista>li.item-$*5

  • [atributo=valor] Para atributos de uma tag. tente img[src=imagem.jpg][title=Minha imagem]

  • {} Texto. Insere texto no elemento. Tente p{lorem ipilum $}*3

Exemplos do Emmet para Workflow Ninja CSS

No CSS é mais fácil.

Basta você digitar as primeiras letras da propriedade, que ele irá encontrar. Para criar com vendor prefix, basta adicionar - antes.

Exemplos:

  • Crie um arquivo main.css, salve-o e digite:
    1
    2
    3
    div {
      c#222+posr+fl+mt1em+ml1em+-txtsh1px1px1px#222
    }

Agora aperte [tab].

Eeeeita penga!!

Viu? Jogo ótimo né?

[update] Para quem usa sublime e Stylus, esse é o cara: https://github.com/billymoon/Stylus-Snippets a sintaxe é a mesma do Emmet, e funciona lindamente.

Conclusão e considerações.

O emmet é uma p* ferramenta pra agilizar seu workflow. Nunca mais você vai digitar seu markup de cabo a rabo, e o css também.

Pode começar a usar já que não irá se arrepender.

Aqui segue uma cheatSheet com referências do Emmet para HTML e CSS. Consulte, quando tiver dúvidas: http://docs.emmet.io/cheat-sheet/

###Obrigado, e volte sempre.

Por hoje é isso, amiguinhos! Agradeço, de coração, sua visita, e espero ter podido ajudar um pouco você a melhorar sua produtividade e qualidade de vida.

Lembrando que agora temos feed de notícias no blog, e você pode inscrever seu e-mail alí -> para receber novos posts diariamente. É pelo mailchimp e não mandarei spam.

Dicas? Comentários? Xingamentos? Poste abaixo: