1 de jun. de 2023 | HTML & CSS

Agiliza tu código HTML y CSS con Emmet

En este post voy a hablaros de Emmet.io, que como dice en su web, es una herramienta que permite mejorar sustancialmente nuestro flujo de trabajo cuando trabajamos con HTML y CSS.

En este post voy a hablaros de Emmet.io, que como dice en su web, es una herramienta que permite mejorar sustancialmente nuestro flujo de trabajo cuando trabajamos con HTML y CSS.

No puedo negar que escribir código me divierte, pero cuando se hace de manera profesional, a veces puede ser complicado y muchas veces suele ser tedioso.

Por eso tenemos que estar en continua formación y buscando información sobre nuevas técnicas y herramientas que nos permitan escribir código mas eficientemente. Emmet es una de estas herramientas.

Emmet se instalará como plugin en nuestro editor de texto, Visual Studio Code lo tiene por defecto pero esta disponible para una amplia lista de editores de texto.

Así funciona

Emmet trabaja con abreviaciones, escribimos una abreviación pulsamos tabulador y esta se expande completando el código completo.

Para expandir la abreviación se utiliza tabulador, o una tecla específica (dependiendo de tu editor de y de su configuración, normalmente es [TAB]). Vamos a ver un ejemplo:

div#contenedor>div.clase>ul>li>a:href*5

Al pulsar tabulador automáticamente se generara el siguiente fragmento de código:

<div id="contenedor">
  <div class="clase">
    <ul>
      <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>
  </div>
</div>

Bastante útil, pero eso no es todo, el cursor ahora se encuentra posicionado dentro del primer atributo href , 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 donde tenemos algo que editar del código expandido.

Bloques de código complejos

Emmet cuenta con símbolos que combinándolos nos permiten generar códigos complejos, por ejemplo, el símbolo + que sirve para colocar etiquetas en un mismo nivel o el símbolo $ para reemplazar dentro del ciclo un numero:

article.post-$*2>.contenido>h2+p+p^footer>a

<article class="post-1">
  <div class="contenido">
    <h2></h2>
    <p></p>
    <p></p>
  </div>
  <footer><a href=""></a></footer>
</article>
<article class="post-2">
  <div class="contenido">
    <h2></h2>
    <p></p>
    <p></p>
  </div>
  <footer><a href=""></a></footer>
</article>

Esto es solo una pequeña parte de lo que nos ofrece Emmet, podéis encontrar toda una amplia guia de todo lo que podemos hacer. Recomiendo que le echéis un vistazo.

También con Sass/CSS

Emmet cuenta con abreviaciones para CSS, para tareas comunes.
Veamos algunos ejemplos:

m5  // margin: 5px;
p5  // padding 5px;
m-10--20  // margin: -10px -20px;
w100p     // width: 100%;

En su pagina web podemos consultar cheat-sheet para conocer todas las abreviaciones disponibles para CSS.
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

Emmet es una herramienta, que nos brinda bastantes beneficios y que puede mejorar nuestra productividad. Es gratuito, buena documentación y disponible para una larga lista de editores.
Con esto yo creo, que si no lo conocías, es el momento de ponerte a ello.

Contacta conmigo

Para contactar conmigo, puedes hacerlo accediendo a la pagina de contacto y rellenando el formulario.

También puedes escribirme a traves Twitter.