Conceptos básicos de Emmet

Introducción

Cuando usamos VS Code tenemos por defecto una serie de atajos que nos permiten autocompletar código de distintas maneras.

Aunque son parte del editor, en realidad vienen de una herramienta llamada Emmet¹.

Emmet nos permite mejorar nuestras habilidades de HTML y CSS por medio de abreviaciones que se convierten en estructuras de código más complejas.

De esta manera podemos desarrollar nuestros proyectos más rápido.

Principio básico

Lo podemos usar por medio de selectores que son parecidos a los que usamos en CSS.

Por ejemplo, si quisiéramos crear una lista desordenada con 3 elementos podríamos escribir:

ul>li*3

No debemos incluir espacios entre los selectores ni operadores.

Una vez escrito nos debe aparecer un listado de posibles autocompletados².

Podemos presionar Enter, Tab o dar clic en algún elemento de la lista para utilizarlo.

El código de arriba resultará en:

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

También cuenta con atajos para autocompletar reglas de CSS y otros atajos útiles.

Elementos

Podemos usar los nombres de las etiquetas para generarlas.

En realidad podemos convertir cualquier palabra en etiqueta

Por ejemplo:

div

Se convierte en:

<div></div>

Operadores

Hijo

Podemos usar el operador > para indicar la relación padre-hijo.

Por ejemplo:

ul>li

Creará el código:

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

Hermano

Podemos usar el operador + para indicar la relación entre elementos hermanos.

Por ejemplo:

p+p

Resultará en:

<p></p>
<p></p>

Ascender

Podemos usar el operador ^ para indicar que queremos subir un nivel en la jerarquía de elementos.

Por ejemplo:

nav>ul>li^div

Resultará en:

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

Podemos usarlo múltiples veces para subir varios niveles en la jerarquía de elementos.

Multiplicación

Podemos usar el operador * para decidir la cantidad del elemento.

Por ejemplo

p*5

Resultará en:

<p></p>
<p></p>
<p></p>
<p></p>
<p></p>

Agrupaciones

Podemos usar los paréntesis para agrupar secciones de una jerarquía.

Por ejemplo:

main>(h2+p)*5

Resultará en:

<main>
  <h2></h2>
  <p></p>
  <h2></h2>
  <p></p>
  <h2></h2>
  <p></p>
  <h2></h2>
  <p></p>
  <h2></h2>
  <p></p>
</main>

Atributos

Id

Podemos agregar un id al elemento por medio de la sintaxis #nombre.

Por ejemplo:

h1#title

Resultará en:

<h1 id="title"></h1>

Class

Podemos agregar una class por medio de la sintaxis .nombre.

Por ejemplo:

button.btn

Resultará en:

<button class="btn"></button>

Podemos agregar múltiples clases repitiendo la misma sintaxis.

Por ejemplo:

span.underline.bold.warning

Resultará en:

<span class="bold warning underline"></span>

Podemos usar la sintaxis de id o class sin un nombre de etiqueta. Por defecto creará un elemento <div> con dichos atributos.

Otros atributos

Podemos usar la notación [atributo] para añadir otro tipo de atributos a nuestros elementos.

Por ejemplo:

button[title]

Resultará en:

<button title=""></button>

Opcionalmente podemos agregar el valor del atributo:

button[title="Submit button"]

<button title="Submit button"></button>

También podemos agregar múltiples atributos en el mismo par de corchetes:

button[type=submit title="Submit button"]

<button type="submit" title="Submit button"></button>

Texto

Podemos agregar el contenido del elemento por medio de la sintaxis nombre{texto}.

Por ejemplo:

h1{Título}

Resultará en:

<h1>Título</h1>

Numeraciones

Cuando utilizamos el operador de multiplicación, podemos utilizar el símbolo $ para utilizar la numeración de cada elemento.

Por ejemplo:

ul>li#element-$*5

Resultará en:

<ul>
  <li id="element-1"></li>
  <li id="element-2"></li>
  <li id="element-3"></li>
  <li id="element-4"></li>
  <li id="element-5"></li>
</ul>

Podemos usar múltiples operadores $ para añadir ceros a la numeración:

ul>li#element-$$$*5

<ul>
  <li id="element-001"></li>
  <li id="element-002"></li>
  <li id="element-003"></li>
  <li id="element-004"></li>
  <li id="element-005"></li>
</ul>

Cambiando la numeración

Podemos cambiar el orden de la numeración utilizando el operador @.

Para hacer que el orden sea descendente, podemos usar @-:

ul>li#element-$@-*5

Resultará en:

<ul>
  <li id="element-5"></li>
  <li id="element-4"></li>
  <li id="element-3"></li>
  <li id="element-2"></li>
  <li id="element-1"></li>
</ul>

Podemos usar la notación @n donde n es el número en el que queremos comenzar la numeración:

ul>li#element-$@100*5

Resultará en:

<ul>
  <li id="element-100"></li>
  <li id="element-101"></li>
  <li id="element-102"></li>
  <li id="element-103"></li>
  <li id="element-104"></li>
</ul>

Etiquetas implícitas

En algunos escenarios podemos omitir el nombre de la etiqueta, por ejemplo, para crear <div class="bold"> podemos escribir div.bold, aunque también podemos usar simplemente .bold.

Ambos resultarán en lo mismo:

<div class="bold"></div>

La etiqueta colocada dependerá del contexto. Por ejemplo, en el caso de ul>.list*4, los elementos colocados con .list serán de tipo <li>.

<ul>
  <li class="list"></li>
  <li class="list"></li>
  <li class="list"></li>
  <li class="list"></li>
</ul>

Aquí hay una lista de las etiquetas que serán usadas dependiendo del contexto:

• <li> será colocada dentro de <ul> y <ol>
• <tr> será colocada dentro de <table>,<tbody>,<thead> y <tfoot>
• <td> será colocada dentro de <tr>
• <option> será colocada dentro de <select> y <optgroup>
• <span> será colocada dentro de elementos como <p>, <em>, <strong>, etc.

Generador de texto

Podemos usar el generador de texto lorem ipsum para agregar texto de relleno.

Por ejemplo:

lorem

Resultará en:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis
exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio
amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates
voluptas?

Número de palabras

Si agregamos un número, se generarán únicamente ese total de palabras.

Por ejemplo:

lorem10

Resultará en:

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iure, dolore.

Número de párrafos

También podemos usar el multiplicador para conseguir un número de párrafos.

Por ejemplo:

lorem*3

Resultará en:

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae adipisci
eius repellat quod quo voluptatum aspernatur fuga corporis possimus, neque eos
inventore sapiente facere ipsum porro aliquid eaque quisquam vero. Eveniet
tempora optio placeat esse fugit inventore voluptatibus consequuntur.
Praesentium voluptatibus possimus est quo vero aliquam tempora magni at maiores,
culpa animi dolor enim facilis autem veritatis! Consectetur, provident laborum?
Qui, odio assumenda. Sapiente, harum repudiandae? Nesciunt architecto
consequuntur laudantium sequi est, facilis facere? Cupiditate cumque dolorum
provident non quo atque magnam eos maiores unde quibusdam! Molestiae inventore
voluptatum illum.

Comentarios