Emmet – niezbędny zestaw narzędzi dla web-deweloperów

Główną ideą narzędzia jest przyspieszenie pisania (w zasadzie generowania) kodu HTML. Stosując odpowiednią składnię, jedna linia kodu pozwala wygenerować listę rozwijaną o dowolnej ilości elementów. Co więcej jest w pełni darmowy, obsługiwany przez 14 edytorów tekstowych (w tym notepad ++, adobe dreamware, eclipse, czy sublime) i posiada bardzo bogatą i czytelną dokumentację.

Składnia emmet’a jest zapożyczona z css, co sprawia że jest bardzo intuicyjna w pisaniu, na przykład poniższy kod utworzy kontener div o klasie navigation.

 
div.navigation
 
<!--  wynik  -->
<div class="navigation">
 
</div>

Kolejnym udogodnieniem jest zagnieżdżanie elementów. Umożliwia utworzenie grupy elementów, całej struktury kontenera, czy nawet struktury strony, pisząc jedna linijkę:

 
header>div.navigation
 
<!--  wynik  -->
<header>
	<div class="navigation"></div>
</header>

Używając * możesz zdefiniować ile razy dany element ma być powielony wewnątrz rodzica.

 
header>div.navigation>ul.navigation-menu>li*5
 
<!--  wynik  -->
<header>
	<div class="navigation">
		<ul class="navigation-menu">
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
</header>

Tak przygotowana lista wymaga jednak uzupełnienia, skoro ma to być menu to elementy listy powinny być wypełnione linkami:

 
header>div.navigation>ul.navigation-menu>li*5>a.link{element $}
 
<!--  wynik  -->
<header>
	<div class="navigation">
		<ul class="navigation-menu">
			<li><a href="" class="link">element 1</a></li>
			<li><a href="" class="link">element 2</a></li>
			<li><a href="" class="link">element 3</a></li>
			<li><a href="" class="link">element 4</a></li>
			<li><a href="" class="link">element 5</a></li>
		</ul>
	</div>
</header>

Ostatnia możliwość, którą chciałem przedstawić (emmet sam w sobie posiada wiele innych funkcji, które znajdziesz w dokumentacji) jest dodawanie atrybutów do elementu, na przykład tytułu title.

 
header>div.navigation>ul.navigation-menu>li*5>a.link[title="link $" href="#$"]{element $}
 
<!--  wynik  -->
<header>
	<div class="navigation">
		<ul class="navigation-menu">
			<li><a href="#1" class="link" title="link 1">element 1</a></li>
			<li><a href="#2" class="link" title="link 2">element 2</a></li>
			<li><a href="#3" class="link" title="link 3">element 3</a></li>
			<li><a href="#4" class="link" title="link 4">element 4</a></li>
			<li><a href="#5" class="link" title="link 5">element 5</a></li>
		</ul>
	</div>
</header>

Przy czym ważna jest tutaj kolejność, najpierw muszą być wypełnione atrybuty nawiasach kwadratowych, dopiero potem zawartość elementu w klamrach.