Webtip: Sneller coderen met Zen coding

Het schrijven van HTML kan flink wat tijd in beslag nemen. Er zijn namelijk vele tags beschikbaar die ook nog eens in de juiste volgorde geplaatst moeten worden. Gelukkig zijn er oplossingen om je hierbij te helpen waardoor je nog sneller je HTML kunt typen. In de webtip van deze week gaan we kijken hoe we met Zen coding sneller HTML kunnen schrijven.

Wat is Zen Coding?

Zen Coding is een manier om op een snelle (lees: in één regel) manier hele stukken HTML te schrijven. Zen Coding is een plugin (gebaseerd op Javascript) en kan in diverse bekende editors gebruikt worden.

Hoe werkt het?

Zen Coding werkt op een manier zoals we die ook kennen met CSS selectors. Laten we maar direct eens kijken hoe coderen met Zen Coding in zijn werk gaat. Aan de hand van een simpel voorbeeldje wordt het wellicht al snel duidelijk. Typen we op de Zen Coding manier het volgende:

div#header>img.thumb+h1

Dan is het volgende stuk HTML het resultaat:

<div id="header">
	<img src="" alt="" class="thumb" />
	<h1></h1>
</div>

Simpel toch? 'div' geeft aan welk element er aangemaakt moet worden, '#' welk id dit element krijgt, '>' is de aanduiding dat er nieuwe elementen moeten worden opgenomen binnen dit element (de div) enz. enz. We zullen voor de duidelijkheid even alle mogelijke functies die te gebruiken zijn op een rijtje zetten:

E
Element type (div, p, img);
E#id
Element met id (div#wrapper, img#header);
E.class
Element met class (div.content, p.error.test). Combinaties zijn ook mogelijk: div#wrapper.content;
E>N
Element in ander element (child element) (div>img, div#header>p>span);
E+N
Element na ander element (h1+p, div#header+div#wrapper+div#footer);
E*N
Vermenigvuldigen van elementen (ul#nav>li*5>a);
E$*N
Nummeren van items (id's, classes etc.) (ul#nav>li.item-$*5);

Zoals je ziet zijn er dus heel veel opties mogelijk. We zullen nog even twee voorbeelden van het nummeren behandelen en dan kunnen jullie zelf aan de slag!

li*3>a

Wordt:

<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>

div#d$-test.class$$*5

Wordt:

<div id="d1-test" class="class11"></div>
<div id="d2-test" class="class22"></div>
<div id="d3-test" class="class33"></div>
<div id="d4-test" class="class44"></div>
<div id="d5-test" class="class55"></div>