Emmet – otimizando a escrita de HTML e CSS

Neste artigo vamos analisar como o plugin Emmet (antigo Zen Coding) pode otimizar e aumentar sua produtividade em relação as linguagens HTML e CSS.

Neste artigo vamos analisar como o plugin Emmet (antigo Zen Coding) pode otimizar e aumentar sua produtividade em relação as linguagens HTML e CSS.

Imagine que poder declarar uma DIV com uma Class Container e dentro dela uma lista com quatro itens com uma só sentença (imagine mesmo uma frase!). Essa é a proposta do Emmet e neste artigo vamos nos aprofundar em como utilizar este plugin a nosso beneficio no Sublime Text.


Se surgir duvidas em relação ao Sublime Text com Emmet dê uma olhada nos tutoriais:

Introdução ao editor de código Sublime Text
O que é e como utilizar o Package Control do Sublime Text – (no final deste tutorial tem um passo a passo para configurar o emmet no Sublime Text via package control)

Introdução ao Emmet

Otimizando a escrita HTML

O Emmet é um plugin disponível para vários editores de código online ou offline (Sublime Text, Eclipse/Aptana, TextMate, Coda, Espresso, Chocolat, Komodo Edit, Notepad++, PSPad, textarea, CodeMirror, Brackets, NetBeans, Adobe Dreamweaver, JSFiddle, JS Bin, CodePen, ICEcoder, Divshot, Codio) que auxilia na escrita de código em HTML e CSS utilizando um método de sentença lógica muito interessante. O Emmet parte do principio básico de programação orientada a objeto onde um código já declarado pode ser reutilizado. Como mencionamos anteriormente, o Emmet utiliza sentenças abreviadas para agilizar a escrita do código, vamos analisar alguns exemplos. O seguinte código em HTML:

<div id="page">
  <div class="logo"></div>
  <ul id="navigation">
    <li><a href="">Item 1</a>
    </li>
    <li><a href="">Item 2</a>
    </li>
    <li><a href="">Item 3</a>
    </li>
    <li><a href="">Item 4</a>
    </li>
    <li><a href="">Item 5</a>
    </li>
  </ul>
</div>

Com Emmet ficaria desta forma:

#page>div.logo+ul#navigation>li*5>a{Item $}

Note a facilidade e a semântica utilizada na sentença do Emmet para declarar o código, pense que da pra agilizar a criação de partes padrões de websites com apenas uma sentença!


Sintaxe

A sintaxe utilizada para declarar elementos no Emmet é bem simples, lembra um pouco a forma como escalonamos o CSS. Você pode utilizar elementos como p ou div para gerar tags em HTML. Você pode escrever div -> (imagine que a seta simboliza a tecla TAB), ou p ->, e assim por diante.

Mesclando operadores

Este método serve para criar uma arvore de elementos, podendo ser elemento filho, ou um elemento após o outro, descendente e etc. Vamos cobrir os exemplos mais comuns de acordo com a documentação oficial do Emmet. O simbolo > na sentença simboliza um elemento “filho”, que faz com que o elemento que vier seguido deste esteja dentro do anterior. Exemplo:

div>ul>li ->

O resultado seria:

<div>
  <ul>
    <li></li>
  </ul>
</div>

O simbolo “+” na sentença simboliza que os elementos declarados estão próximos um do outro porém no mesmo nível. Exemplo: div+div+span ->

Resultado em HTML:

<div></div>
<div></div>
<span></span>

O simbolo ^ faz com que os elementos filhos fiquem abaixo dos ultimos elementos declarados na sentença. Exemplo: div+div+span>p+em -> Resultado em HTML:

<div></div>
<div></div>
<span>
  <p></p>
  <em></em>
</span>

Com adição do simbolo ^ o resultado seria: div+div+span>p+em^div ->

<div></div>
<div></div>
<span>
  <p></p>
  <em></em>
</span>
<div></div>

Você pode utilizar quantos “^” você quiser, cada um deles vai descer o elemento declarado após o/os símbolos em um nível.


O simbolo * multiplica o elemento declarado pelo número indicado. ul>li*5 ->

Resultado em HTML:

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Os simbolos ( ) são utilizados para agrupar itens de uma determinada seção. Vamos analisar o exemplo: div>(header>ul>li*2>a)+footer>p ->

O resultado em HTML seria:

<div>
  <header>
    <ul>
      <li>
        <a href=""></a>
      </li>
      <li>
        <a href=""></a>
      </li>
    </ul>
  </header>
  <footer>
    <p></p>
  </footer>
</div>

Você pode juntar grupos de sentenças e, por exemplo, adicionar um multiplicador, como o exemplo: (div>dl>(dt+dd)*3)+footer>p ->

Resultado:

<div>
  <dl>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
  </dl>
</div>
<footer>
  <p></p>
</footer>

Com grupos você pode montar um layout com apenas uma sentença, mas de acordo com a documentação oficial do Emmet isso não é indicado.

Atributos dos operadores

Nesta seção o Emmet apresenta uma forme de declarar os atributos de elemento na propria sentença, como por exemplo determinar o id de uma div ou a class de um p, como no exemplo abaixo: Exemplo utilizando atributos de ID & Class. div#header+div.page+div#footer.class1.class2.class3 ->

O resultado:

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

Você pode utilizar [ ] para definir atributos próprios ao elementos: td[title="Hello world!" colspan=3] ->

Resultado:

<td title="Hello world!" colspan="3"></td>
  • Você pode utilizar quantos atributos você quiser dentro dos colchetes.
  • Você não precisa das aspas se os elementos não estão separados por espaço, por exemplo: td[title=hello colspan=3].


Numerando itens

Com o simbolo * nos multiplicamos elementos, agora com o $ nos conseguimos numerar os elementos. Basta inserir o simbolo $ junto com o nome do elemento que o mesmo será repetido (caso haja uma multiplicação para o elemento) com o número definido de cada elemento, como no exemplo abaixo. ul>li.item$*5 ->

Resultado:

<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
  <li class="item4"></li>
  <li class="item5"></li>
</ul>

Inserindo texto

Você pode pré definir o texto que será atribuído a um elemento a, por exemplo: a{Clique aqui} ->

Resultado:

<a href="">Clique aqui</a>

Note que você pode declarar um texto para cada elemento declarado dentro do padrão abaixo:

p>{Clique }+a{aqui}+{ para continuar} ->

Resultado:

<p>Clique <a href="">aqui</a> para continuar</p>

O Emmet para HTML basicamente se resume a estes comandos, claro que existem outras possibilidades para facilitar ainda mais a escrita do código, mas por experiência própria, se aprofunde na base do plugin e as funções mais avançadas dele vão vir até você para suprir sua necessidade de agilizar a programação. 🙂 Vamos agora dar uma pincelada no que o Emmet nos oferece em relação ao CSS.


Otimizando a escrita CSS

De acordo com a seção de abreviações CSS na documentação oficial do Emmet, o plugin não tem muito a oferecer em relação ao CSS, isso porque a maioria de editores de código hoje disponíveis já fornecem um grande auxílio na escrita do CSS auto-completando as propriedades conforme a digitação do usuário. De qualquer forma, em alguns pontos o Emmet é realmente útil em relação a escrita do código CSS. Vamos abordar alguns elementos úteis.

Abreviações CSS para motores de renderização

Todo web developer sobre ao ter que declarar uma classe CSS especificando cada motor de renderização, que no caso seria especificar como o código é lido por diferentes navegadores de acordo com seu motor, como por exemplo o webkit que é o motor de renderização do Google Chrome e também é utilizado pelo Safari. O Emmet possui uma função interessante pra ajudar nessa questão, analisemos o exemplo abaixo em um arquivo CSS:

-display ->

Resultado:

-webkit-display: ;
-moz-display: ;
-ms-display: ;
-o-display: ;
display: ;


Pra quem teria que digitar cada item para cada motor de renderização, isso ja é uma ajuda e tanto! Facilitamos ainda mais este processo declarando a sentença da seguinte maneira, por exemplo: -flex:10px

Resultado:

-webkit-flex: 10px;
-moz-flex: 10px;
-ms-flex: 10px;
-o-flex: 10px;
flex: 10px;

Onde px = px / p = porcentagem / e = em / x = ex. Galera, basicamente essas são as soluções mais úteis (e que utilidade) que o Emmet tem a nos oferecer. Como havia comentado anteriormente, existem outras formas de utilizar o plugin para melhorar ainda mais o desempenho, mesmo trabalhando com CSS, o que vai depender do quanto você precisa e deseja se aprofundar no plugin para garantir uma codificação ágil.

Qualquer dúvida, estou disponível via comentários galera.

🙂

  • mazulo

    Cara, ótimo artigo! Consegui entender tudo o que queria. Estou cuidando para viralizar esse seu artigo, para chegar até outras pessoas que também precisem, como eu estava 😀
    Parabéns!

    • Cara, obrigado, a idéia é ajudar quem está com dúvidas assim como eu estava mesmo!

  • octavioamu

    corregir -flex:10px vira -prefx-flex nao float 😛

  • Muito bom artigo. Parabéns!

    • Obrigado Matheus, qualquer dúvida estou a disposição!

  • Wesley Covre

    Obrigado pelas dicas, Thierry! To desde ontem lendo os posts do seu blog, e não consigo sair. ^^

    Outro package que eu achei bastante legal e complementa o Emmet é o HTML Snippets (https://packagecontrol.io/packages/HTML%20Snippets). Só configurar p/ não dar conflito, e foi!

    • Muito obrigado Wesley, comentários como este me incentivam muito!

      Vou dar uma olhada nesse pkg que você citou, obrigado pela dica!

  • juca

    Uma pergutna bem newbie. Ok, muito bonito tudo isso acontecendo, mas instalei o plugin no Notepad++, mas ele não está interagindo com o Notepad++, tipo a função na qual você digita um ! e ganha um cabeçalho em html5. Todos mostram o plugin em execução, mas a ativação dele não é nada intuitiva, como se faz, por favor?

    • Eduardo Rodrigues Vianna

      Licença, amigos, me metendo aqui na pergunta do Juca. Usando o VIM, no Linux, obtemos uma template em HTML com o Emmet instalado da seguinte maneira. Chamamos a abertura de um arquivo inexistente pelo emulador de terminal (os emuladores de terminal são semelhantes ao prompt de comando no Windows), como em

      $ vim novo.html

      Com o VIM aberto, digitamos html:5, e em seguida damos Ctrl+y+vírgula, digitanto a vírgula bem rápido: C-y,. Aparece então a template. Esta é uma maneira de verificar se o Emmet foi corretamente instalado. Não posso dizer se funcionaria no Notepad++, mas posso recomendar ao Juca que instale o VIM no Windows. Existe uma versão do VIM com interface gráfica, disponível também para o Windows, chamada gVim. Sempre recomendo essa IDE ao pessoal que desenvolve front-end. Parece meio esquisitona num primeiro momento, mas vale muito a pena experimentar.

  • Adilson Calixto Dos Santos

    Show cara suas postagens. Estão me ajudando muito.