ZenCoding Tutorial – CSS

Zen coding (Emmet) es una herramienta para editores web que nos permite generar código de forma ágil y rápida, acelerando el maquetado de nuestros diseños en HTML y CSS.
Esta ejecución de código es generada por un motor de abreviaturas que permite que las expresiones sean expandidas.
Si os gusta escribir vuestro código desde cero, ZenCoding es sin duda la herramienta perfecta para crear vuestros proyectos de forma productiva.

Descarga

ZenCoding está disponible para un gran numero de editores web como NotePad++, Sublime Text, Coda, PSPad …

Las diferentes versiones de esta herramienta podeis descargarlas desde el siguiente enlace:
ZenCoding Downloads

Instalación en Notepad++

Para instalar ZenCoding en NotePad++ accedemos a Plugins > Plugin_Manager > Show_Plugin_Manager y seleccionamos Zend Coding – Python.

Como alternativa podemos descargarlo desde el siguiente enlace:
Zen Coding for Notepad++
y copiar el contenido del archivo .zip en la carpeta plugins, que se encuentra en el directorio de instalación de Notepad++

Instalación en Sublime Text

Para instalar ZenCoding en Sublime Text pulsamos CTRL+SHIFT+P o accedemos a Preferences > Package Control > Install Package, escribimos Emmet para buscarlo y lo instalamos posteriormente.

Si no teneis acceso es porque no teneis instalado el Package Controll, la instalación es muy sencilla, puedes ver como se hace desde el
siguiente enlace:

Package Controll INSTALLATION

La página está en inglés, básicamente es acceder a View>Show Console, pegar el código Python que nos ofrecen en la página según la versión de nuestro Sublime Text y pulsar Enter.

También nos ofrece la posibilidad de instalarlo manualmente.

Como funciona

propiedad + TECLA_EXPANSION

El comando de expansión suele ser Ctrl+E o a veces Ctrl+Alt+Enter, la tecla de tabulación también puede ser a veces la tecla de expansión por defecto, si teneis problemas para expandir el codigo, revisar los atajos de teclado, en NotePad++, por ejemplo, los podemos encontrar en Configuración > Gestor de atajos de teclado.

Si habeis leido el articulo Manual de ZenCoding HTML 5 en la sección de HTML 5, os habreis dado cuenta de la potencia que tiene esta herramienta, ahora vamos a crear un documento CSS, en el articulo Manual de ZenCoding HTML 5, creamos un documento Html 5 a partir de un código generado con ZenCoding , en el que expandiamos el código mediante abreviaturas, lo mismo podemos hacer en CSS, básicamente lo que hacemos es abreviar el nombre de las propiedades y expandirlas, la forma de abreviatura es muy intuitiva:

m + TECLA_EXPANSION genera:
margin: ;

p + TECLA_EXPANSION genera:
padding: ;

bg + TECLA_EXPANSION genera:
background: #000;

d + TECLA_EXPANSION genera:
display: block;

bd + TECLA_EXPANSION genera:
border: ;

Como habreis podido comprobar, la forma en que abreviamos la sintaxis es muy intuitiva, en algunos casos hay que tener cuidado por el parecido:

fs + TECLA_EXPANSION genera:
font-style: italic;

fz + TECLA_EXPANSION genera:
font-size: ;

Selector +

Al igual que en HTML usamos este selector para añadir etiquetas, en CSS el selector + nos sirve para añadir propiedades, veamos un ejemplo:

m+p+bg+cl+f + TECLA_EXPANSION genera:

margin: ;
padding: ;
background: #000;
clear: both;
font: ;

El selector + nos sirve además como complemento en algunas propiedades:

bg+ + TECLA_EXPANSION genera:
background: #fff url() 0 0 no-repeat;

bd+ + TECLA_EXPANSION genera:
border: 1px solid #000;

f+ + TECLA_EXPANSION genera:
font: 1em Arial,sans-serif;

Propiedades más específicas

Hemos visto como se expande la propiedad margin, pero las propiedades pueden ser expandidas de modo más específico:

mt+mb+ml+mr + TECLA_EXPANSION genera:

margin-top: ;
margin-bottom: ;
margin-left: ;
margin-right: ;

Propiedades y valores

No solo podemos expandir código CSS con sus dos puntos, su punto y coma listo para escribir su valor, además podemos pasarle el valor directamente desde la abreviatura.

Sintaxis:

propiedad:valor + TECLA_EXPANSION

Ejemplos

td:n + TECLA_EXPANSION genera:
text-decoration: none;lis:n + TECLA_EXPANSION genera:
list-style: none;ov:s + TECLA_EXPANSION genera:
overflow: scroll;

Es importante destacar que el valor siempre lo expandimos despues del selector “:” para no confundir la sintaxis

mt + TECLA_EXPANSION genera:
margin-top: ;

mt:a + TECLA_EXPANSION genera:
margin-top: auto;

m:a + TECLA_EXPANSION genera:
margin: auto;

Aplicando los estilos

Imaginemos que queremos dar los siguientes estilos a un elemento:

float:left;
font:1em Arial,sans-serif;
border:1px solid #000;
background-color:#FFF;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing:border-box;

Esto lo hubieramos generado con ZenCoding con el siguiente código:

fl:l+(f+)+(bd+)+bgc+bxz:bb

Como mencionamos anteriormente, las abreviaturas que incluyen el signo “+” son abreviaturas especiales que expanden todos los valores posibles que se pueden incluir en esa propiedad, son expandidas de forma ordenada por lo que solo debemos de preocuparnos por modificar sus valores.

La mayor parte del tiempo trabajamos con ZenCoding (Emmet) en CSS escribiendo propiedades y valores sencillos, ya hemos visto lo que podemos expandir con el signo “+”, algunas abreviaturas que posee este plugin son más completas que un simple “propiedad:valor”, a continuación os dejo aquí algunas abreviaturas que os serán de gran utilidad:

@import url();

@media print {
}

m:a!

margin: auto !important;

op:ms

-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';

fw:b

font-weight: bold;

pl:25

padding-left: 25px;

ovx:h

overflow-x: hidden;

bg:ie

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='x.png',sizingMethod='crop');

bxsh

-webkit-box-shadow: inset hoff voff blur color;
box-shadow: inset hoff voff blur color;

Mas informacion

Si os ha gustado este tutorial, seguro que os interesa el
Manual de ZenCoding para HTML

Podeis descargar la referencia completa en PDF y ODT en el siguiente enlace
Cheat sheets for Zen Coding syntax and abbreviations