Blog personal de Helmer Galvis

HTML y CSS veloz con Emmet

Artículo publicado el jueves, marzo 28, 2013. Guardado en la categoría: Diseño web

Emmet es un plugin para los editores de código más populares hoy en día como Sublime Text, Coda o Eclipse. Nos permite trabajar de manera más rápida con HTML y CSS mediante abreviaturas, al estilo Zen Coding.

¿En qué consiste su funcionamiento?
Básicamente nos ahorra trabajo a la hora de escribir HTML y CSS mediante la abreviación de etiquetas, selectores y clases CSS. Además de complementarse con operadores.

Pero lo mejor es ver ejemplos de como funciona Emmet. Vamos a ver algunos ejemplos HTML.

Crear un documento HTML5 nuevo
Basta con solo escribir: “html:5” y presionar la tecla “Tab” el resultado es el siguiente:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body>
</html>

Nos genera inmediatamente un cuerpo básico de documento en HTML5. Ahorrandonos muchas líneas que ya sabemos de memoria y que son reptitivas.

Etiquetas básicas
Podemos escribir cualquier etiqueta sin los “<>” y automáticamente se crean. Si escribimos “div, p o ul” y presionamos la tecla “Tab” nos genera:

<div></div> - <p></p> - <ul></ul>

Usando los operadores
Podemos usar una gran cantidad de operadores como suma, multiplicación, anidación, etc. vamos a ver un ejemplo de anidación. Escribimos “div>ul>li” y presionamos “Tab” obtendremos como resultado:


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

Si nos basamos en el ejemplo anterior, pero en vez de un solo “li” queremos 5, podemos usar el operador de multiplicación, de esta manera: “div>ul>li*5” que nos daría como resultado:


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

En CSS tenemos más de lo mismo, si queremos la propiedad “margin” con valor “20px” tan solo escribimos “m20” que nos dará como resultado:

margin: 20px;

Con los prefijos propietarios, estos son los de webkit o mozilla lo tenemos más fácil para no repetir. Si queremos usar la propiedad “border-radius” escribimos “bdrs” lo que nos genera:


-webkit-border-radius: ;
-moz-border-radius: ;
border-radius: ;

Como puedes ver, con este plugin nuestro trabajo puede ser más eficiente y rápido. Si quieres saber mucho más obre Emmet te invito a ver esta presentación de @nabaroa que es muy completa. También en Smashin Magazine hay un buen artículo con muchos ejemplos. Y para instalar el plugin en tu editor favorito solo debes seguir los pasos que te indican en la web oficial de Emmet.io.