Emmet: come sviluppare pagine web alla velocità della luce [Parte 1]

Se anche a voi vi annoiate a scrivere codice HTML non siete gli unici. Apri il tag, chiudi il tag, inserisci le classi, l’href,… altro che maestro Miyagi. Come dare un taglio a questa scocciatura, velocizzando lo sviluppo delle pagine web? Ho la soluzione!

Come ogni programmatore il mio obbiettivo è schiacciare meno tasti possibili su una tastiera e appena sento odore di un metodo per farlo, mi ci fiondo subito. E una delle soluzioni si chiama Emmet.

Emmet è un plugin sviluppato per vari IDE (io lo utilizzo con Atom) che ti consente, attraverso una serie di shortcut estremamente intuitivi, di creare tag html in pochi click.

Fin qui sembrerebbe il classico suggeritore degli IDE, ma Emmet fa molto di più di questo. Ed esempio, è possibile moltiplicare i tuoi tag, come nel caso delle liste, inserendo già le classi, una numerazione incrementale e mille altri dettagli, ma facciamo un passo alla volta.

Come usare Emmet

Innanzitutto partiamo dalle basi. Ogni shortcut di Emmet va confermato con TAB 🙂 Te l’ho detto che partivamo dalle basi.

Si può creare un tag scrivendone semplicemente in nome (puoi creare anche tag personalizzati) e premendo TAB.

Per inserire una o più classi basta concatenare il punto e il nome della classe (ad es. article.blog.home + TAB), stesso discorso con gli id, semplicemente facendo precedere il nome dal classico cancelletto #.

Se vuoi creare al volo un div puoi omettere tranquillamente il tag e scrivere immediatamente la classe o l’id.

.widget + TAB

Moltiplicare l’efficacia di Emmet

Abbiamo capito come funziona, era spingiamo con gli steroidi! Aggiungiamo i primi operatori

Concatenare i tag

È possibile scrivere in una sola linea tutti i tag che si vogliono scrivere utilizzando l’operatore +. Una volta premuto il TAB questi tag saranno generati uno dopo l’altro.

Nidificare un tag

Ma se volessimo inserire un tag all’interno di un altro? Basta semplicemente usare > e vedrai apparire un tag nidificato Ad esempio:

.privacyBnnr>h4.title+p.disclaimer

<div class="privacyBnnr">
    <h4 class="title"></h4>
    <p class="disclaimer"></p>
</div>

Moltiplicare un tag

È possibile anche moltiplicare lo stesso tag alla bisogna, semplicemente inserendo * e il numero di volte che lo si vuole generare

 ul>li*5

Inserire del testo d’esempio

Vuoi inserire il classico testo Lorem Ipsum? ti serve solo aggiungere lorem all’interno del tag da riempire ed Emmet vi inserirà un paragrafo. Nel caso tu voglia più controllo, è sufficiente fare seguire lorem dal numero di parole da inerire Es. p*4>lorem10 (domanda: secondo te cosa fa questo shortcut?)

Cheat sheet di Emmet

Se volete l’elenco completo dei comandi e delle possibilità, potete andare sulla cheat sheet, occhio a non perdervi perché è realmente lunghissima!

Fatemi sapere nei commenti se usavate già Emmet o usate un altro sistema per semplificarvi la vita 🙂