Emmet, accelera la scrittura del tuo codice HTML e CSS
11 settembre 2013  //  By:   //  Css, Html, Software  //  No Comment   //   981 Views

Emmet (precedentemente conosciuto come Zen Coding ) è un kit di strumenti per web-Developer che può notevolmente migliorare il tempo di scrittura del tuo codice HTML e CSS nel flusso di lavoro. E’ meglio descritto come un insieme di macro e scorciatoie da tastiera per lo sviluppo web rapido. Disponibile come download gratuito e plug-in per editor popolari che consentono di memorizzare e riutilizzare pezzi di codice di uso comune, chiamati “snippets (frammenti)”. L’utilizzo di questo plugin anche se molto utile garantisce buone performance dopo una certa pratica.

Emmet ha anche il vantaggio di essere coerente in tutte le piattaforme e gli editor: cioè la sintassi di Emmet può essere riutilizzata su più editor per la rapida generazione di codice.

Dopo aver effettuato il download per il vostro editor, come potete vedere c’è un ampia scelta, anche per servizi online come JSFiddle, procedete all’inserimento del plugin nel vostro editor.

Da adesso possiamo usare le varie abbreviazioni che ci propone Emmet. Infatti le Abbreviazioni sono il cuore dell’Emmet toolkit: queste espressioni particolari vengono analizzate in fase di esecuzione e trasformate in blocco di codice strutturato, HTML.

Oppure per generare tabelle molto rapidamente:

table>tr *3>td*5
Creerà una fila di tre per cinque colonne in tabella.

Altri esempi:

div>ul>li
produrrà

 

Uso dell’operatore +
div+p+bq

esempio di tag nidificato:

nav>ul>(li>a) * 5

È possibile utilizzare Emmet per generare rapidamente un filtro dei contenuti.

nav>ul>(li>a[href=#]{Link})*5

Per aggiungere id o classi presenti nei css possiamo fare in questo modo:

div#header+div.page+div#footer.class1.class2.class3

Per tutti gli altri esempi ed una guida più completa e approfondita andare sul sito ufficiale

About the Author :

BI CONSULTING. Studente di Ingegneria Informatica, Sistemista Linux e appassionato di tutto ciò che sia tecnologico ma soprattutto Open Source. Distro: Debian e Arch LInux. Smartphone: Nexus / Lg G2 Buona Lettura  Visualizza il profilo su Linkedln

Leave a reply