5 trucos de Emmet para HTML

Published in

Adalab

3 min readApr 8, 2019

«Las opiniones, hechos e interpretaciones expresadas en esta publicación, que no han sido sometida a revisión editorial o de otro tipo, son de exclusiva responsabilidad de sus autoras y pueden no coincidir con las de Adalab.»

Si has llegado hasta aquí es porque necesitas agilizar tu trabajo y no pasarte horas picando código HTML. Pues estás de suerte, ya que voy a enseñarte 5 trucos de Emmet para ahorrarte ese preciado tiempo.

Para empezar te muestro en la siguiente imagen «los básicos» para empezar a trabajar.

Numeración automática

Si tienes que escribir varios elementos y que estos lleven en su texto, clase o id algún número, solo tienes que escribir el símbolo de $.

ul>li{Item $}*6

Dará como resultado:

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
   <li>Item 5</li>
   <li>Item 6</li>
</ul>

Pero…, ¿y si quieres que vayan en orden descendente?, no hay problema, solo tendrás que escribir lo siguiente:

ul>li{Item $@-}*6

Y obtendreás:

<ul>
   <li>Item 6</li>
   <li>Item 5</li>
   <li>Item 4</li>
   <li>Item 3</li>
   <li>Item 2</li>
   <li>Item 1</li>
</ul>

Si eres usuario de Visual Studio Code, este truco no suele funcionar :(

Poner clases e ID

Puede parecer una obviedad, pero a parte de poner una sola clase o ID, se pueden poner varias a la vez.

section#principal.grid-container.column-center

Obtendrás:

<section id="principal" class="grid-container column-center"></section>

Nombres de etiquetas implícitos

Hay ciertos elementos que, si solo indicas el nombre de la clase, crearán automáticamente su etiqueta por defecto. Algunos de los más comunes son:

.className --> <div class="className"></div>ul>.className --> <ul><li class="className"></li></ul>table>.classRow>.classCol --> <table>
                               <tr class="classRow">
                                  <td class="classCol"></td>
                               </tr>
                             </table>

Texto falso

Si necesitas en algún momento poner varios párrafos con texto falso será tan fácil como:

p*2>Lorem

Lo que dará como resultado:

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis minus odio impedit, voluptatum temporibus sint similique a tempore sit aut laboriosam sequi provident quae, debitis reprehenderit deleniti ratione alias dicta.</p><p>Laborum, quas quisquam nostrum alias eos quam delectus officiis, id eligendi maxime aperiam exercitationem blanditiis quibusdam accusantium? Tempora, a accusantium perferendis asperiores, fuga nulla ad dolore voluptatum veritatis hic sit.</p>

Atajo de los atajos (¿atajoception?, ¿cheatception?)

Pues sí. Si Emmet es un plug-in centrado en los atajos, que sepas que en sus propios atajos tiene atajos.

Aquí os dejo algunos ejemplos:

input:radio --> input:r
<input type="radio" name="" id="">html:5 --> !
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">  
  <title>Document</title>
</head>
<body></body>
</html>input:submit --> input:s
<input type="submit" value="">button:reset --> button:r => btn:r
<button type="reset"></button>

Bonus

Si ya conocías estos atajos para HTML en próximas publicaciones hablaré de como funciona Emmet con CSS, pero mientras tanto te dejo unos ejemplos:

bgc
background-color:#fff;p:15
padding: 14px;m:a
margin: auto;fz:20
font-size: 20px;

Y si todavía no conocías Emmet, ya estás tardando en instalártelo en tu editor de texto y verás como reducirás tu tiempo de trabajo y aumentará tu tiempo libre.

Muchas gracias

Solo agradecerte que hayas llegado hasta el final. Puedes encontrarme en Twitter y LinkedIn.