Hoje se espalhou pelo twitter a notícia do novo plugin que visa otimizar o tempo na codificação XHTML e CSS. O plugin Zen Coding, desenvolvido por Sergey Chikuyonok do Smashing Magazine.

A idéia base do plugin é trabalhar com a sintaxe do css para criar os elementos do XHTML. Após a digitação da combinação de elementos é necessário apenas prescionar (ctrl + ,) que a expressão transforma-se em tags. Na prática você escreveria:

div#nav>ul>li*2>a

Que resultaria em:

<div id="nav">
   <ul>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
   </ul>
</div>

Testando o plugin  deu para perceber que quem tem um bom conhecimento de DOM sentirá uma facilidade maior em trabalhar com o plugin, devido a lógica de ‘arvore’ que ele utiliza para criar os elementos.

É tudo muito simples, veja a demostração do poder do Zen Coding:

Além do vídeo o Smashing disponibilizou um demo onde ao prescionar  “Ctrl + ,“ você tem uma previsão de como o plugin funciona.

Lista de possíveis propriedades e seus resultados.

• (div, p) -> Nome do elemento;
• (div#sidebar, a#logo) -> Elemento mais id;
• (h1.vcard, p.entry.left) -> Emento mais classe ou combinações de classes;
• (div#header>h1>a) -> Indicando o elemento filho;
• (div#header+div#content+div#footer) -> Elementos irmãos;
• (ul#nav>li*5>a) -> Multiplicando elementos;
• (ul#nav>li.item-$*5) -> Numerando os itens;

Editores suportados

O Zen Coding foi produzido em JavaScript e Python para rodar na maior quantidade possível de plataformas. Porém alguns editores, como o TextMate, tem suporte apenas a função de expandir os termos abreviados (que pra mim já é muita coisa).

Os editores que tem suporte a todas funcionalidades do plugin são: Aptana(para Windowns), TEA for Coda e TEA for Espresso (para Mac).

O objetivo deste post é demonstrar um resumo do que é possível com esse maravilhoso plugin. Você pode se aprofundar no assunto visitando o post original. Lá você verá que existem outras funcionalidades inclusive a de acrescentar seus próprios trechos de códigos no arquivo fonte do plugin.

Espero que seja proveitoso para todos os leitores assim como esta sendo para mim. No próximo post explicarei como instalar o Zen no Aptana.