Emmet (Zen Coding) – sneller HTML/CSS schrijven

Emmet is de hernoemde versie van het project Zen Coding. Met Emmet kun je door middel van afkortingen snel HTML-lijsten, blokken met klassen en ID’s genereren. Naast HTML kun je ook snel CSS-eigenschappen schrijven met behulp van verkorte notaties. In eerste instantie lijkt het misschien overbodig om nog meer afkortingen en tools te onthouden, maar zodra je eraan gewend raakt, voelt het vreemd om zonder Emmet code te schrijven.

Mogelijkheden van Emmet (Zen Coding)

Heel vaak moeten we grote hoeveelheden HTML-code schrijven, en hoe meer code er is, hoe groter de kans op fouten — bijvoorbeeld een niet-gesloten tag. Hierbij helpt Emmet (Zen Coding). De meeste IDE’s hebben ingebouwde ondersteuning of een plugin voor Emmet. Je hoeft alleen maar een sneltoets in te stellen voor het uitvoeren en genereren van HTML-code.

Bijvoorbeeld, je kunt schrijven:

div#content>h1+p

Druk vervolgens op de Emmet-uitvoertoets, en dit wordt omgezet in:

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

Zoals je ziet schrijven we eenvoudige CSS-selectors, en krijgen we aan de output HTML met dezelfde hiërarchie.

Een van de prettigste functies van Emmet is het genereren van HTML-menu’s. Bijvoorbeeld, deze code:

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

Wordt na generatie omgezet in:

Hier gebruikten we de selector * in Emmet, wat het aantal te genereren elementen aangeeft. Deze werkt niet alleen met <li>, maar met elk HTML-element:

div.item$*3

In combinatie met het dollarteken ($) genereert dit de volgende code:

Laten we teruggaan naar ons menu en deze code schrijven:

div#header>ul#navigation>li.item$*>a>span
Over ons
Producten
Nieuws
Blog
Contact

Dit genereert een volledig menu:

<div id="header">
<ul id="navigation">
<li class="item1"><a href=""><span>Over ons</span></a></li>
<li class="item2"><a href=""><span>Producten</span></a></li>
<li class="item3"><a href=""><span>Nieuws</span></a></li>
<li class="item4"><a href=""><span>Blog</span></a></li>
<li class="item5"><a href=""><span>Contact</span></a></li>
</ul>
</div>

Je kunt je eigen tags schrijven en alles doen wat je wilt met behulp van Emmet-selectors:

• E
  Elementnaam (div, ul)
• E#id
  ID-attribuut van een element (<div id="">)
• E.class
  Class-attribuut van een element (<div class="">)
• E>N
  Geneste elementen
• E+N
  Aangrenzend element
• E*N
  Meerdere exemplaren van hetzelfde element genereren
• E$*N
  Meerdere elementen genereren met genummerde klassen (bijv. ul#nav>li.item-$*5)

Ik denk dat bijna alle populaire IDE’s Emmet (Zen Coding) ondersteunen, maar als je Notepad++ gebruikt, moet je Emmet afzonderlijk installeren.

Emmet (Zen Coding) installeren in Notepad++

Je kunt de plugin voor Notepad++ hier downloaden:

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

Plaats vervolgens de Emmet (Zen Coding)-bibliotheek in de map van Notepad++.

Om de bibliotheek te installeren, gebruik je de ingebouwde pluginmanager:

Vink in de lijst met beschikbare plugins Zen Coding - Python aan en klik op Install.

Als de plugin Zen Coding niet in de lijst staat, betekent dit dat je huidige versie van Notepad++ deze niet ondersteunt. Je kunt dan een oudere versie van Notepad++ installeren die dit ondersteunt, of wachten tot de plugin wordt bijgewerkt voor jouw versie.

Na het herstarten van Notepad++ kun je de plugin gebruiken. Om code te genereren, druk je op Ctrl + Alt + Enter. Bijvoorbeeld, om de volgende code te genereren:

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

moet je schrijven a.link>span en daarna de toetsencombinatie Ctrl + Alt + Enter indrukken.