Emmet: Escribe HTML y CSS de forma sencilla

¡Felicidades por avanzar en tu camino de desarrollo web! Hasta ahora, has escrito código línea por línea, lo cual es fundamental para aprender. Pero, ¿qué pasaría si pudieras escribir bloques enteros de HTML o reglas CSS completas con solo unas pocas pulsaciones de tecla? Aquí es donde entra **Emmet**.

Emmet es una herramienta que la mayoría de los editores de código modernos (VS Code, Sublime Text, Atom, etc.) traen integrada o se puede instalar como extensión. Permite expandir abreviaturas concisas en estructuras HTML y CSS completas, ahorrándote una cantidad enorme de tiempo.

—

1. ¿Cómo Funciona Emmet?

Emmet utiliza una sintaxis de CSS para generar HTML y una sintaxis especial para generar CSS. Después de escribir una abreviatura, simplemente presionas la tecla **Tab** (o a veces Enter) y ¡boom!, la abreviatura se expande en el código completo.

Ejemplo Básico de HTML:

Imagina que quieres un párrafo. Escribes:

p

Presionas Tab y obtienes:

<p></p>
—

2. Sintaxis Básica de HTML con Emmet

a. Elementos HTML Simples:

Solo escribe el nombre de la etiqueta:

b. Clases (`.`) e IDs (`#`):

Usa la sintaxis de CSS para añadir clases e IDs:

  • `div.container` → `
    `
  • `#header` → `` (si no especificas etiqueta, por defecto es `div`)
  • `p.text-red#intro` → `

    `

c. Elementos Hijos (`>`):

Para anidar elementos, usa el símbolo `>`:

  • `div>ul>li` → 
    <div>
    <ul>
        <li></li>
    </ul>
</div>
  • `header>nav>ul>li>a` → Estructura de navegación completa.

d. Elementos Hermanos (`+`):

Para elementos al mismo nivel, usa el símbolo `+`:

  • `h1+p+img` → 
    <h1></h1>
<p></p>
<img src="" alt="" />

e. Multiplicación (`*`):

Para crear múltiples elementos idénticos, usa `*` seguido del número:

  • `ul>li*5` → Lista desordenada con 5 elementos de lista vacíos. 
    <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
  • `div.item*3` → Tres divs con la clase `item`.

f. Agrupación (`()`):

Usa paréntesis para agrupar elementos complejos:

  • `(header>h1)+main+(footer>p)` → 
    <header>
    <h1></h1>
</header>
<main></main>
<footer>
    <p></p>
</footer>

g. Atributos Personalizados (`[]`):

Añade atributos y sus valores dentro de corchetes:

Emmet tiene abreviaturas predefinidas para inputs como `input:text`, `input:email`, `input:submit`, etc.

h. Contenido de Texto (`{}`):

Para añadir texto dentro de un elemento, usa llaves:

  • `h1{Hola Mundo}` → `

    Hola Mundo

    `
  • `p{Haz clic aquí} + a{Más info}[href=»#»]` → 
    <p>Haz clic aquí</p>
<a href="#">Más info</a>

i. Numeración Automática (`$`):

Usa el símbolo `$` para numerar elementos. Puedes ponerlo una o varias veces para rellenar con ceros a la izquierda:

  • `ul>li.item-$*3` → 
    <ul>
    <li class="item-1"></li>
    <li class="item-2"></li>
    <li class="item-3"></li>
</ul>
  • `h${$}*3` → 
    <h1>1</h1>
<h2>2</h2>
<h3>3</h3>
—

3. Abreviaturas de CSS con Emmet

Emmet también tiene abreviaturas para propiedades CSS. Generalmente, son las iniciales de la propiedad.

  • `p` → `padding: ;`
  • `m` → `margin: ;`
  • `fz` → `font-size: ;`
  • `bgc` → `background-color: ;`
  • `dn` → `display: none;`
  • `posa` → `position: absolute;`
  • `w100` → `width: 100%;`
  • `h50px` → `height: 50px;`

¡Incluso puedes combinarlas o añadir valores directamente!

  • `m20` → `margin: 20px;`
  • `p10-20` → `padding: 10px 20px;`
  • `bd+` → `border: 1px solid #000;`
—

4. ¡Practica Emmet!

La mejor manera de aprender Emmet es practicar. Abre tu editor de código favorito (VS Code es altamente recomendado) y comienza a probar estas abreviaturas. Te darás cuenta de lo rápido que te vuelves.

**Intenta expandir estas abreviaturas en tu editor y compara los resultados:**

  • `! (o html:5)`
  • `table>tr*2>td*3`
  • `div#app>h2{Mi App}+ul>li.item$$*3>a[href=#]{Enlace $$}`
  • `section.hero>div.container>h1{Título del Hero}+p{Descripción}`
  • `nav>ul>li*4>a[href=/pagina$.html]{Página $}`
—

Dominar Emmet te hará significativamente más eficiente en tu flujo de trabajo de desarrollo. Es una de esas herramientas que, una vez que la usas, no puedes vivir sin ella.

¡Sigue construyendo tu arsenal de habilidades!