Código Zen – xhtml y css abreviado

Zen Coding es un plugin creado por Sergey Chikuyonok disponible para diferentes IDEs (Aptana/Eclipse, Text-mate, Coda, Espresso, Komodo, Notepad++, PSPad, Netbeans, Ultaedit, etc. ) que te permite escribir código xhtml válido escribiendo mucho, mucho menos. Es una de esas cosas que te permiten acabar a tu hora:D. Por ejemplo, puedes escribir:

ul#navegacion>li.nav-item-$*5>a

y mágicamente se transforma en:

<ul id=”navegacion”>
<li><a href=”"></a></li>
<li><a href=”"></a></li>
<li><a href=”"></a></li>
<li><a href=”"></a></li>
<li><a href=”"></a></li>
</ul>

Llámame vago, pero yo prefiero escribir lo de arriba

Además cuando le coges el truco es muy muy fácil. Hay 7 reglas básicas:

• E. Prácticamente cualquier elemento del DOM: Si por ejemplo escribimos ‘div’, el IDE lo transformará en <div></div> .
• E#id. Elemento con identificador:  ‘div#mi_id’ se transforma en <div id=”mi_id”></div>
• E.class. Div con clase: ”div.mi_clase’ se transforma en <div class=”mi_clase”></div>
• E>N. Elemento dentro de otro elemento ‘hijo’: div>p se transforma en <div><p></p></div>
• E+N. Elemento al mismo nivel de DOM (pariente): div+p se transforma en <div></div><p></p>
• E*N. Multiplicador de elementos: p*5 se transforma en <p></p><p></p><p></p><p></p><p></p> (todos bien colocaditos)
• E$*N. El dólar añade numeración a los elementos: li#id_$*3 se transforma en <li id=”id_1″></li><li id=”id_2″></li><li id=”id_3″></li>

Como explicamos arriba, todas estas reglas se pueden combinar para crear estructuras bastante complejas.

También sirve para CSS. Por ejemplo, la expresión

pos:r+fl:l+ov:h+bg+

se transforma en

position:relative;
float:left;
overflow:hidden;
background:#FFF url() 0 0 no-repeat;

mola, eh?

tenéis todas las referencias css en google code.

Zen Coding está escrito en javascript y por tanto se puede emplear en aplicaciones web, incluso CMS.

Además, según el IDE que manejéis, tendréis disponibles más o menos utilidades además de las expuestas, como por ejemplo la opción ‘Wrap with abreviation’, que permite escribir un texto y generar automáticamente toda la maquetación xhtml a su alrededor.

Concluyendo, que pese a que todavía esto está en pañales y hay que pulirlo, ya es súper útil y encima tiene un potencial de crecimiento  enorme. Es increíble que algo tan sencillo pueda incrementar la productividad de los desarrolladores web tanto. Ahora que lo vemos, parece tan obvio! Pero sólo a  Sergey Chikuyonok se le ocurrió la idea y la puso en práctica. Mis reverencias desde aquí, Sergey.

Esto va a ser una auténtica revolución, yo desde YA MISMO empiezo a usarlo. Y vosotros?