Emmet (Zen Coding): scrivere HTML/CSS più velocemente

Emmet è il nuovo nome del progetto Zen Coding. Emmet permette di generare rapidamente liste HTML, blocchi con classi e ID utilizzando abbreviazioni. Oltre all’HTML, consente anche di scrivere velocemente proprietà CSS, sempre tramite abbreviazioni. A prima vista può sembrare inutile memorizzare nuove scorciatoie, ma una volta abituati, diventa difficile scrivere codice senza Emmet.

Funzionalità di Emmet (Zen Coding)

Spesso capita di dover scrivere molto codice HTML e, più codice si scrive, maggiore è la probabilità di commettere errori — ad esempio dimenticare di chiudere un tag. In questo caso, Emmet (Zen Coding) è di grande aiuto. La maggior parte delle IDE dispone di supporto integrato o di un plugin per Emmet; basta assegnare una scorciatoia da tastiera per generare automaticamente il codice HTML.

Ad esempio, puoi scrivere:

div#content>h1+p

Premendo il tasto di esecuzione di Emmet, questo si trasforma in:

<div id="content"> <h1></h1> <p></p> </div>

Come puoi vedere, scriviamo semplici selettori CSS e otteniamo un codice HTML con la stessa gerarchia.

Una delle caratteristiche più comode di Emmet è la generazione di menu HTML. Ad esempio, il seguente codice:

div#header>img.logo+ul#nav>li*4>a

Verrà trasformato in:

Qui abbiamo usato il selettore *, che in Emmet indica il numero di elementi da generare. Funziona non solo con <li>, ma con qualsiasi altro tag:

div.item$*3

In combinazione con il simbolo $, questo genera il seguente codice:

Torniamo ora al nostro menu e scriviamo questo codice:

div#header>ul#navigation>li.item$*>a>span
Chi siamo
Prodotti
Notizie
Blog
Contatti

Questo genererà automaticamente un intero menu:

<div id="header">
<ul id="navigation">
<li class="item1"><a href=""><span>Chi siamo</span></a></li>
<li class="item2"><a href=""><span>Prodotti</span></a></li>
<li class="item3"><a href=""><span>Notizie</span></a></li>
<li class="item4"><a href=""><span>Blog</span></a></li>
<li class="item5"><a href=""><span>Contatti</span></a></li>
</ul>
</div>

Puoi scrivere qualsiasi combinazione di tag e creare qualunque struttura utilizzando i selettori di Emmet:

• E — nome dell’elemento (div, ul)
• E#id — attributo ID dell’elemento (<div id="">)
• E.class — attributo class dell’elemento (<div class="">)
• E>N — elemento annidato
• E+N — elemento adiacente
• E*N — genera più elementi identici
• E$*N — genera più elementi numerati (es. ul#nav>li.item-$*5)

Credo che tutte le IDE moderne supportino Emmet (Zen Coding), ma se utilizzi Notepad++, dovrai installarlo manualmente.

Installazione di Emmet (Zen Coding) in Notepad++

Puoi scaricare il plugin per Notepad++ da qui:

http://sourceforge.net/projects/npppythonscript/files/

Copia la libreria di Emmet (Zen Coding) nella cartella di Notepad++.

Per installare la libreria, utilizza il gestore dei plugin integrato:

Nell’elenco dei plugin disponibili, seleziona Zen Coding - Python e clicca su Install.

Se il plugin Zen Coding non è presente nell’elenco, significa che la tua versione attuale di Notepad++ non lo supporta. In tal caso, installa una versione precedente che lo includa oppure attendi l’aggiornamento del plugin per la tua versione.

Dopo aver riavviato Notepad++, potrai utilizzare il plugin. Per generare il codice, premi la combinazione di tasti Ctrl + Alt + Enter. Ad esempio, per ottenere:

<a href="" class="link"><span></span></a>

scrivi semplicemente a.link>span e premi Ctrl + Alt + Enter.