Zen Coding

Cristian in Development

November 13, 2009

Hace unas semanas descubrí The Art of Zen Coding, y desde entonces estoy totalmente entregado a esta nueva forma de escribir HTML y CSS.

Aplicando matemáticas para definir la estructura del HTML consigues escribir 50 lineas de código en 1, es una idea ganadora que ha cambiado la forma de escribir el código base de mis proyectos.

Se trata de un snippet para Textmate, también disponbible para Aptana, que incrementa de forma sorprendente la velocidad a la que escribes lí­neas de código..

Mejor con algunos ejemplos:

ul#menu.navigation>li*5>a

Pulsando CMD+E, generará el siguiente código HTML:

<ul id="navigation" class="main">
	<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>

Y usando el tabulador podemos empezar a rellenar el contenido del atributo href y el texto del enlace.

Podemos concatenar la id o la clase del elemento, incluso las dos, podemos usar multiplicadores, sumatorios o incluso introducir algunas variables.

ul#menu.navigation>li#menu-$*3>img+a

Devolverá:

<ul id="menu" class="navigation">
	<li id="menu-1"><img src="" alt="" /><a href=""></a></li>
	<li id="menu-2"><img src="" alt="" /><a href=""></a></li>
	<li id="menu-3"><img src="" alt="" /><a href=""></a></li>
</ul>

Y usando el tabulador nos desplazamos y vamos rellenado los atributos necesarios, genial.

A partir de aquí­ las posibilidades son enormes, puedes llegar a escribir en una línea el HTML de toda la página.

Pasemos a examinar la aplicación a CSS.

El bundle de CSS nos permite asignar la propiedad y su valor directamente, a diferencia de algunos snippets, que asignan cada propiedad a una combinación de teclado, lo que supone un cambio signicativo y una reducción de tiempo que utilizas para escribir espectacular. Aunque se echa en falta la posibilidad de crear directamente selectores, propiedades y atributos.

bg+

Pulsando el tabulador nos devolverá:

background: #fff url() no-repeat  0 0;

Con el tabulador nos podremos posicionar en los diferentes atributos: color, url, posición y modo.

Otros usos:

m:4
margin: 0 0 0 0;

pos:a
position: absolute;

d:b
display: block;

bdrz:m
-moz-border-radius: ;

bdrz:w
-webkit-border-radius: ;

Descárgate el bundle aquí­.

Puedes encontrar snippets útiles aquí­, aunque para augmentar tu productividad escribiendo sugiero que pases algo de tiempo configurándote los tuyos.

0 Comments

Insert Comment