Para los que trabajamos en la web de forma profesional, escribir código es a veces divertido, a veces complicado, y muchas veces es algo tedioso, sobre todo cuando tenemos que escribir cosas largas y repetitivas. Es por esto que siempre debemos tener los ojos abiertos a nuevos procesos o técnicas que nos puedan ayudar a escribir nuestro código de manera más eficiente.
Hoy quiero hablarles acerca de Emmet.io.
Como está descrito en su sitio web, Emmet es una herramienta invisible pero muy poderosa que te permite mejorar drásticamente el flujo de trabajo de HTML y CSS, viene disponible por defecto en algunos editores como PHPStorm, Web Storm o Visual Code Studio, pero también está disponible como plugin para la gran mayoría de los editores e IDEs actuales como Sublime, Atom, Brackets, Aptana, NetBeans, etc.
¿Cómo funciona?
Emmet trabaja a través de abreviaciones, escribimos una abreviación la cual se expande para completar todo el código que esta representa. Las abreviaciones son familiares para cualquiera que haya escrito algo de CSS, ya que utiliza el mismo formato que los selectores de CSS. Para expandir la abreviación se utiliza un atajo de teclado, o una tecla específica (dependiendo de tu editor y de tu configuración, normalmente es [TAB]). Vamos a ver un ejemplo sencillo:
<!-- Ejemplo de abreviación --> .container>.col12>h2+p
Al expandir la abreviación automáticamente generamos el siguiente código:
<div class="container">
<div class="col12">
<h2></h2>
<p></p>
</div>
</div>
Lo cual de por sí es una gran ayuda, pero aparte al probar esto en su editor podrán notar que el cursor ahora se encuentra posicionado dentro de la primera etiqueta h2 , listo para escribir. Ahora si presionamos [Tab] nuevamente el cursor va a colocarse dentro de la siguiente etiqueta para introducir contenido, y así sucesivamente hasta el final de las zonas editables del código expandido.
Ahora veamos un ejemplo un poco diferente:
ul.links>li*4>a.link[target=]
Aquí vemos dos cosas especiales, la primera es el *4 con lo cual indicamos a Emmet que multiplique la etiqueta que li que precede por la cantidad indicada con el número, esto lo podemos agregar en cualquier etiqueta, con cualquier número. Luego vemos una etiqueta a con clase link, y hemos agregado el atributo target vacío para generar el atributo como una zona editable (al generar links, Emmet automáticamente genera el atributo href como zona editable). Al expandir esto, obtenemos el siguiente bloque de código:
<ul class="links">
<li><a href="" class="link" target=""></a></li>
<li><a href="" class="link" target=""></a></li>
<li><a href="" class="link" target=""></a></li>
<li><a href="" class="link" target=""></a></li>
</ul>
En el cual, usando [Tab] el cursor va a saltar en orden desde el primer href, luego al target y luego al texto del link en cada uno de los elementos. ¡Muy útil!
Emmet cuenta con varias combinaciones de símbolos que nos permiten generar bloques de código complejos, por ejemplo, el símbolo + para colocar etiquetas en el mismo nivel, o ^ para subir un nivel (o varios) o $ para reemplazar dentro del ciclo con el número:
<!-- + mismo nivel, ^ subir un nivel --> .article.art-$*2>.content>h3+p^.cta>a
Lo cual se expande a (noten como .cta esta fuera de .content, y cada .article contiene una clase única usando su posición):
<div class="article art-1">
<div class="content">
<h3></h3>
<p></p>
</div>
<div class="cta"><a href=""></a></div>
</div>
<div class="article art-2">
<div class="content">
<h3></h3>
<p></p>
</div>
<div class="cta"><a href=""></a></div>
</div>
Emmet cuenta con muchos otros detalles que ayudan a acelerar la edición del HTML, como lo son por ejemplo el tag balancing: seleccionar el contenido de una etiqueta ([Ctrl + D] en Sublime/Mac), o uno de mis favoritos, wrapping: envolver selección en una etiqueta ([Ctrl + Shift + W] en Sublime/Mac).
También hay formas de remover tags (ambas partes) sin remover el contenido, actualizar automáticamente tamaños a imágenes, y muchas otras cosas, revisa la documentación específica para tu instalación ya que muchos de los atajos de teclado pueden cambiar considerablemente dependiendo del editor y de la plataforma.
También Funciona con Sass/CSS
Emmet también cuenta con abreviaciones para CSS (que igualmente funcionan en Sass) para tareas comunes, que al mismo tiempo son muy flexibles y nos permiten trabajar en cosas específicas para nuestro proyecto. Veamos algunos ejemplos:
m10 // Expande a margin: 10px; m12-24 // Expande a margin: 12px 24px; m$variable // En Sass, expande a margin: $variable; p20 // padding: 20px; t50% // top: 50%; w100 // width: 100px; h100% // height: 100%;
Además hay muchísimas abreviaciones para propiedades comunes que no usan valores numéricos, o dejando el valor vacío para escribirlo manualmente, donde el cursor se posiciona correctamente para escribir el valor rápidamente:
posa // position: absolute; posr // position: relative; posf // position: fixed; ! // !important ff // font-family:
Emmet también puede generar automáticamente prefijos de navegador, precediendo la abreviación con un guión:
-df // se expande a: display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; -webkit-display: flex; -moz-display: flex; -ms-display: flex; -o-display: flex; display: flex;
Aunque yo recomiendo más dejar esto a una herramienta especializada como gulp-autoprefixer con post-css o similares.
Como hay tantas propiedades de CSS y varias formas de escribirlas, Emmet permite varias formas de escribir lo mismo, y en muchos casos el resultado será correcto, en otros casos solo toma un poco de práctica obtener el resultado deseado con la primera abreviación. Para probar abreviaciones y acostumbrarse a su uso pueden ver el editor en vivo en la dirección http://docs.emmet.io/css-abbreviations/fuzzy-search/
Conclusión
Dada la naturaleza omnipresente de Emmet, y el hecho de que es gratuito, en realidad no hay excusas para no usarlo. Es una herramienta que trae muchos beneficios y nos puede volver mucho más efectivos en nuestro trabajo. Personalmente, yo prefiero usar Emmet en vez de pre-procesadores de HTML como Haml o Jade, ya que obtenemos el resultado instantáneamente sin necesidad de compilar nada, y es tan fácil acostumbrarse a Emmet que se hace muy natural escribir código de esta forma. Te invito cordialmente a que lo pruebes y nos cuentes tu experiencia, o que nos comentes si ya lo conoces para inspirar a otros.
Material relacionado
Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.
Lección anterior Cómo mejorar la apariencia y funcionalidad de PhpStorm Lección siguiente Habilitar SSL para desarrollo con Homestead