“Emmet” la taquigrafía de los Front-End y Diseñadores Web

Macbook – CC por Matt Biddulph

Quien maneja CSS todos los días es casi imposible que no conozca, o ya sea usuario de alguno de los multiples pre-procesadores que existen en el mercado para ahorrarnos varios tecleos. En Javascript también existen cosas similares, como lo son frameworks o coffescript (y similares), y para maquetar HTML rápidamente también existe HALM o Jade.

El problema con HTML, es que muchas veces el código está mezclado con lenguaje de programación back-end y/o códigos especiales de plantillas para plataformas MVC (por ejemplo WordPress). Por lo que usar uno de los pre-procesadores puede causar más problemas que beneficios. La buena noticia es que existe “Emmet”, que nos permite tener la velocidad de escritura de un front-end, pero dando como resultado un HTML estándar.

La manera de usa Emmet es simple, escribimos en una sola linea de código con la estructura de que queremos, y después con solo pulsar un “tab”, la estructura se transformara en código HTML normal.

Ejemplo, la siguiente linea en el dialecto de emmet:

html>head>title{Hola Mundo}^body>section#articles>div.post>p{Hola}

Se transforma en el siguiente HTML

<html>
<head>
    <title>Hola Mundo</title>
</head>
<body>
    <section id="articles">
        <div class="post">
            <p>Hola</p>
        </div>
    </section>
</body>
</html>

Emmet es gratuito, solo requieres instalarlo como un plug-in más en tu editor preferido. Es compatible con los IDEs más populares, dígase: Sublime Text, Notepad++, Eclipse, Coda, Atom y un largo etcétera que podrás ver directamente en su sitio web.

Enlace: Emmet | Imagen: Matt Biddulph.

Más notas sobre Tips Web

Publicación por Javier

44 artículos Mi sitio web