Emmet[.io] para agilizar el desarrollo con HTML

Emmet es un plugin para múltiples editores de código para escribir HTML/CSS mediante una sintáxis más corta (la misma que utiliza CSS).

El plugin se encuentra disponible en Brackets como una “extensión”:

Y en Atom como “package”:

También funciona automáticamente sobre Codepen.

Una vez instalado el funcionamiento en la mayoría de editores (incluído Brackets) se ejecuta el funcionamiento básico con la tecla “TABULADOR” (en Atom con CTRL+E), y lo que hará se le conoce como EXPANDIR.

Por ejemplo, en un archivo .html se escribe la palabra “ div e inmediatamente, sin dejar espacios, se presiona Tabulador:

div

Esta misma técnica funciona para crear elementos anidados (dentro de otros) mediante la utilización del símbolo “ > ”:

header>div

Las clases se pueden asignar con la misma sintáxis de CSS:

div.contenedor

Y se puede mezclar con la anidación:

header.contenedor>div.texto
header.principal>nav>ul>li

No siempre se tiene que anidar, también se pueden colocar elementos a la misma altura utilizando el símbolo “+”, por ejemplo, 2 divs dentro del header:

header>div+div

Colocar múltiples elementos juntos:

div.uno+div.dos

Emmet incluye operaciones matemáticas básicas, por ejemplo, repetir items X veces:

div*10

Y la multiplicación se puede utilizar para que enumere nombres de clases utiliza el símbolo “$” como reemplazo del número:

div.contenedor_$*10

Todo se puede mezclar de modo que con una sola línea se creen estructuras de cualquier tipo:

.contenedor>header>h1+nav>ul>li.link_$*4>a

Grupos

Se utilizan cuando se necesitan anidar objetos pero también crear elementos al lado, por ejemplo para lograr la siguiente estructura:

La ruta section>article>div*2 no podría funcionar ya que el div.texto necesitaría estar a un lado del article y div*2 no se lo permitirían.

Los grupos permiten colocar elementos entre paréntesis ( ) para que mantengan su posición general, por ejemplo:

section>(article>div*2)+div.texto

La solución fue tener a section como principal e inmediatamente anidar un grupo donde se coloca el article>div*2 de este modo se cierra el paréntesis y el nivel de anidación se mantiene dando paso para que div.texto pueda estar en el 2ndo nivel al igual que el article.

Otro ejemplo que necesita tener en el segundo nivel un section con un article anidado y otro section solo:

header>(section>article)+section

Utilizando lo visto anteriormente se puede generar una estructura de sitio como la siguiente: http://quick.as/r79aiawkb