HTML und CSS Code schneller schreiben mit Emmet

Sie sind Web-Designer, schreiben regelmäßig und viel HTML- und CSS Code und wollen dass dies schneller von der Hand geht?
Das Plugin Emmet macht es möglich. Mit ein paar Tastenschlägen schreiben Sie kleine Codeschnipsel, die sich dann per Tastendruck in komplexeren HTML- oder CSS Code verwandeln. In diesem Artikel zeigen wir Ihnen, wie Sie dieses Tool nutzen können und bringen Ihnen die Kurzschreibweise anhand einiger Beispiele näher.

Installation

Da Emmet ein Plugin für Entwicklungsumgebungen bzw. Text-Editoren ist, muss es zunächst für die von Ihnen favorisierte Anwendung installiert werden. Unter http://emmet.io/download/ finden Sie dazu eine Liste von allen Programmen für die das Plugin erhältlich ist. Da viele bekannte Anwendungen vertreten sind, wird das Plugin wahrscheinlich auch mit Ihrer Software kompatibel sein. Mit einem Klick auf die entsprechende Anwendung, wird Ihnen gezeigt, wie Sie das Plugin speziell dafür installieren können. Falls Ihr bevorzugter Editor nicht vertreten ist oder Sie sich nicht sicher sind, ob Sie das Tool überhaupt nutzen möchten, können Sie Emmet auch in Webeditoren wie JSFiddle oder Codepen ausprobieren, ohne es zu installieren. In einigen Programmen, wie PHPStorm oder VIM ist Emmet bereits integriert und brauch daher nicht extra installiert werden. Die Anwendungen, die das betrifft, werden ebenfalls unten auf der Downloadseite angezeigt.

Nutzung
Haben Sie das Plugin installiert, können Sie nun mit dem Experimentieren starten. Schauen wir uns zunächst an, wie wir schneller HTML Code schreiben können. Öffnen Sie ein leeres HTML Dokument und tippen Sie zunächst folgenden Code ein und drücken danach die TAB-Taste auf Ihrer Tastatur:

html:5

Wenn alles funktioniert hat müssten Sie nun folgenden Code in Ihrem Editor sehen können:

In manchen Programmen können Sie nun nochmals die TAB-Taste drücken, woraufhin der Cursor an die wichtigsten Stellen springt, die Sie eventuell noch abändern möchten. So gelangen Sie bei erneutem Drücken von TAB nach dem Entfalten des Codes direkt zu lang=“en“ oder bei einem weiteren Sprung zum Inhalt von title. Allein dieser kleine Code-Schnipsel erspart Ihnen also schon einmal das ständige Eintippen der HTML-Definition und der Head- und Body-Bereiche. Natürlich ist dies aber nicht das Einzige, was Emmet kann.

In dem entsprechenden Cheat-Sheet auf der Entwickler-Seite, können Sie sich einen Überblick über alle möglichen Anwendungsfälle machen. Dort finden Sie unter anderem auch noch folgende nützliche Code-Schnipsel, um das Schreiben von HTML-Code zu vereinfachen:

a:link

link:css

inp

ul+

Denken Sie immer daran, nach dem Eingeben der Kurzschreibweise, die TAB-Taste zu drücken, um den Code ausgeben zu lassen.
In manchen Programmen kann man die Tastenbelegung für Emmet auch ändern und eine andere Tastenkombination wählen.

Verwendet werden können auch aus CSS bekannte Selektoren wie >, ^ oder +, um Mehrere Elemente am Stück zu erzeugen.

nav>ul>li erzeugt beispielsweise

und div+p+bq erzeugt

Elemente können mithilfe von runden Klammern auch gruppiert werden, z.B. so:

div>(header>ul>li*2>a)+footer>p

Das Ergebnis dazu sieht dann wie folgt aus:

Auch können mehrere Elemente mit dem *-Operator erzeugt werden.

ul>li*5 wird dann zu

Das Dollar-Symbol ersetzt Variablennamen wie folgt:

ul>li.item$*5

wird zu

Auch Attribute für Tags können gezielt gesetzt werden. Hier ist allerdings die Frage, ob das wirklich Tipparbeit erspart:

p[title=“Hello world“]

Es gibt noch viel mehr Möglichkeiten, wie Emmet für HTML genutzt werden kann. Schauen Sie sich am besten das Cheat-Sheet an und spielen Sie ein bisschen mit den verschiedenen Möglichkeiten.

CSS

Die Abkürungen für das CSS sind einfach zu merken, da sie meist mit dem ersten Buchstaben oder der ersten Silbe derjenigen CSS-Eigenschaft anfangen, die man nutzen möchte.

So wird c zu

color:#000;

c:r zu

color:rgb(0, 0, 0);

und c:ra zu

color:rgba(0, 0, 0, .5);

Dieses Syntax-Schema läuft wie ein roter Faden durch die meisten CSS-Eigenschaften hindurch. Die Grundeigenschaft ohne Wert wird mit dem Anfangsbuchstaben gebildet.

Zunächst die Eigenschaft ohne Wert: fw

    font-weight:;

Danach mit einem Doppelpunkt der erste Buchstabe des Wertes, z.B.: fw:n

    font-weight:normal;

oder fw:b

    font-weight:bold;

Sie sehen schon, dass die Syntax sehr leicht zu verstehen ist und man mit nur 2-3 Buchstaben schon einen ganzen CSS Befehl entstehen lassen kann. Wenn man diese Technik also oft benutzt und übt, damit den eigenen Code zu schreiben, kann man irgendwann eine beträchtliche Menge an Zeit einsparen. Wir hoffen, wir konnten ein wenig Interesse für dieses nützliche Plugin wecken und wünschen Ihnen viel Spaß beim Experimentieren mit Emmet.