Dominando herramientas: Emmet

Tabla de contenido

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 Emmet1.

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
AVISO

No debemos incluir espacios entre los selectores ni operadores.

Una vez escrito nos debe aparecer un listado de posibles autocompletados2.

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.

Ver en YouTube

Elementos

Podemos usar los nombres de las etiquetas para generarlas.

TIP En realidad podemos convertir cualquier palabra en etiqueta

Por ejemplo:

div

Se convierte en:

<div></div>

Ver en YouTube

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>

Ver en YouTube

Hermano

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

Por ejemplo:

p+p

Resultará en:

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

Ver en YouTube

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.

Ver en YouTube

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.

Notas

  1. Emmet - Documentación oficial

  2. Emmet - Hoja de referencia

Atajos CSS con Emmet

Posición

pos:a se convierte en:

position: absolute;

pos:r se convierte en:

position: relative;

t se convierte en:

top:

b se convierte en:

bottom:

l se convierte en:

left:

r se convierte en:

right:

Display

d:n se convierte en:

display: none;

d:b se convierte en:

display: block;

d:f se convierte en:

display: flex;

d:t se convierte en:

display: table;

Flex

ai se convierte en:

align-items:

ai:c se convierte en:

align-items: center;

ai:b se convierte en:

align-items: baseline;

ai:fe se convierte en:

align-items: flex-end;

fx se convierte en:

flex:

fw se convierte en:

flex-wrap:

fw:n se convierte en:

flex-wrap: nowrap;

fw:w se convierte en:

flex-wrap: wrap;

jc se convierte en:

justify-content:

jc:c se convierte en:

justify-content: center;

jc:fe se convierte en:

justify-content: flex-end;

jc:sa se convierte en:

justify-content: space-around;

jc:sb se convierte en:

justify-content: space-between;

Visibilidad

v se convierte en:

visibility: visible;

v:h se convierte en:

visibility: hidden;

v:v se convierte en:

visibility: visible;

Margen

m se convierte en:

margin:

mt se convierte en:

margin-top:

mb se convierte en:

margin-bottom:

ml se convierte en:

margin-left:

mr se convierte en:

margin-right:

m:a se convierte en:

margin: auto;

Relleno

p se convierte en:

padding:

pt se convierte en:

padding-top:

pb se convierte en:

padding-bottom:

pl se convierte en:

padding-left:

pr se convierte en:

padding-right:

Tamaño

w se convierte en:

width:

h se convierte en:

height:

maw se convierte en:

max-width:

mah se convierte en:

max-height:

miw se convierte en:

min-width:

mih se convierte en:

min-height:

Peso de fuente

fw se convierte en:

font-weight:

fw:n se convierte en:

font-weight: normal;

fw:b se convierte en:

font-weight: bold;

Estilo de fuente

fs se convierte en:

font-style:

fs:n se convierte en:

font-style: normal;

fs:i se convierte en:

font-style: italic;

Familia de fuente

ff se convierte en:

font-family:

ff:a se convierte en:

font-family: Arial;

ff:t se convierte en:

font-family: Times New Roman;

ff:v se convierte en:

font-family: Verdana;

ff:m se convierte en:

font-family: Monospace;

Alineación de texto

ta se convierte en:

text-align:

ta:l se convierte en:

text-align: left;

ta:c se convierte en:

text-align: center;

ta:r se convierte en:

text-align: right;

ta:j se convierte en:

text-align: justify;

Decoración de texto

td:n se convierte en:

text-decoration: none;

td:u se convierte en:

text-decoration: underline;

Sombra de texto

tsh se convierte en:

text-shadow:

tsh:r se convierte en:

text-shadow: 1px 1px 2px black;

tsh:ra se convierte en:

text-shadow: 0 0 5px rgba(0,0,0,0.5);

tsh:n se convierte en:

text-shadow: none;

Fondo

bg se convierte en:

background:

Color de fondo

bgc se convierte en:

background-color:

bgc:t se convierte en:

background-color: transparent;

Imagen de fondo

bgi se convierte en:

background-image:

bgi:n se convierte en:

background-image: none;

Color

c se convierte en:

color:

c:r se convierte en:

color: red;

c:ra se convierte en:

color: rgba(0,0,0,0.5);

Opacidad

op se convierte en:

opacity:

Borde

bd se convierte en:

border:

bd:n se convierte en:

border: none;

Transformaciones

trf se convierte en:

transform:

trf:r se convierte en:

transform: rotate(45deg);

trf:sc se convierte en:

transform: scale(1.5);

trf:t se convierte en:

transform: translate(10px, 20px);

trf:o se convierte en:

transform: skewX(30deg);

Otros

Important

! se convierte en:

!important;

FontFace

@f se convierte en:

@font-face { }

@media

@m se convierte en:

@media { }

Otros atajos de Emmet

Estructura básica de un documento

! (signo de admiración) para crear la estructura básica de un documento HTML con la versión más actual.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

Anteriormente se usaba el atajo html:5.

Ligar archivo CSS

link:css para ligar un archivo CSS a nuestro documento:

<link rel="stylesheet" href="style.css" />

Ligar favicon

link:favicon para ligar un archivo que servirá como el ícono de nuestra pestaña:

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

Métodos de entrada de datos

Texto

input para agregar un <input> de tipo text:

<input type="text" />

Búsqueda

input:search para agregar un <input> de tipo search:

<input type="search" name="" id="" />

Email

input:email para agregar un <input> de tipo email:

<input type="email" name="" id="" />

Url

input:url para agregar un <input> de tipo url:

<input type="url" name="" id="" />

Contraseña

input:password para agregar un <input> de tipo password:

<input type="password" name="" id="" />

Fecha y hora

input:datetime para agregar un <input> de tipo datetime:

<input type="datetime" name="" id="" />

Fecha

input:date para agregar un <input> de tipo date:

<input type="date" name="" id="" />

Mes

input:month para agregar un <input> de tipo month:

<input type="month" name="" id="" />

Semana

input:week para agregar un <input> de tipo week:

<input type="week" name="" id="" />

Hora

input:time para agregar un <input> de tipo time:

<input type="time" name="" id="" />

Teléfono

input:tel para agregar un <input> de tipo tel:

<input type="tel" name="" id="" />

Número

input:number para agregar un <input> de tipo number:

<input type="number" name="" id="" />

Color

input:color para agregar un <input> de tipo color:

<input type="color" name="" id="" />

Casilla

input:checkbox para agregar un <input> de tipo checkbox:

<input type="checkbox" name="" id="" />

Botón de opción

input:radio para agregar un <input> de tipo radio:

<input type="radio" name="" id="" />

Rango

input:range para agregar un <input> de tipo range:

<input type="range" name="" id="" />

Archivo

input:file para agregar un <input> de tipo file:

<input type="file" name="" id="" />

Enviar

input:submit para agregar un <input> de tipo submit:

<input type="submit" value="" />

Imagen

input:image para agregar un <input> de tipo image:

<input type="image" src="" alt="" />

Botón

input:b, input:btn o input:button para crear un <input> de tipo button:

<input type="button" value="" />

Reiniciar

input:reset para agregar un <input> de tipo reset:

<input type="reset" value="" />

Comentarios