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.
Colour Lovers
Subtle Patterns
icons DB
Google Web Fonts
Lorem Pixel
SXC.hu