Schneller HTML und CSS schreiben mit Emmet

Schneller HTML und CSS schreiben mit Emmet

Du kannst bereits schnell tippen, aber du möchtest noch schneller deinen HTML und CSS Code eingeben können, dann habe ich die richtige Lösung für dich. Egal ob du bereits schnell schreibst oder die Buchstaben beim Schreiben suchen musst, Emmet ist für alle die Lösung um rascher zu arbeiten.

Wie aber kann uns Emmet dabei helfen schneller zu schreiben? Dieser Artikel zeigt es Dir.

Was ist Emmet

Das Projekt wurde 2009 von Sergey Chikuyonok gegründet und ist so manchem noch unter dem Namen „Zen Coding“ bekannt. Im Jahr 2012 wurde es dann auf Emmet umbenannt.

Die Webseite des Projekts findet man unter: http://emmet.io/

Die Grundfunktion von Emmet ist es mit Abkürzungen rasch HTML und CSS Code schreiben zu können. Man gibt dabei im Editor die Abkürzungen ein, drückt auf die TAB Taste und schon erscheint statt der Abkürzung eine Menge HTML Code.

Hier habe ich einmal zwei Beispiele wie dies aussieht:

Eingabe:

!

Ausgabe:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Man kann also mit nur einem Buchstaben das komplette Grundgerüst einer HTML Datei erstellen.

Emmet - HTML Grundgerüst
Emmet – HTML Grundgerüst

 

Ein weiteres Beispiel zeigt, wie rasch mit einer Zeile eine Menge sinnvoller Code generiert werden kann.

Eingabe:

#header>.logo+.navigation>ul.mainnav>li*4>a{Menu $}

Ausgabe:

    <div id="header">
        <div class="logo"></div>
        <div class="navigation">
            <ul class="mainnav">
                <li><a href="">Menu 1</a></li>
                <li><a href="">Menu 2</a></li>
                <li><a href="">Menu 3</a></li>
                <li><a href="">Menu 4</a></li>
            </ul>
        </div>
    </div>
Emmet - Komplexer Ausdruck
Emmet – Komplexer Ausdruck

 

Emmet bietet aber nicht nur ein System für HTML Abkürzungen, es ist damit auch möglich rasch CSS Code zu schreiben oder verschiedene Aktionen im Editor durchzuführen. Einige Beispiele dazu sind:

  • Passende Anfangs und End Tags zu finden
  • Tags zu entfernen
  • Im Document leichter zu navigieren

und vieles mehr. Darauf möchte ich aber dann etwas später noch eingehen.

Wo funktioniert Emmet

Bevor ich mehr auf die Funktionen und Möglichkeiten  eingehe, möchte ich die wahrscheinlich wichtigste Frage beantworten – wo kann Emmet verwendet werden?

Emmet ist kein eigener Editor sondern als Erweiterung für die verschiedensten Editoren verfügbar. Dies hat den Vorteil, dass man mit seiner gewohnten Umgebung weiterarbeiten und gleichzeitig die vielen Vorteile von Emmet nutzen kann. Es werden dabei eine Reihe von Editoren direkt vom Emmet Anbieter unterstützt. Dazu gehören unter anderem:

  • Sublime Text
  • Eclipse / Aptana
  • TextMate
  • Coda
  • Notepad++
  • Brackets
  • Adobe Dreamweaver

Weitere Editoren werden durch Plugins von Drittanbietern unterstützt, hierzu gehören Produkte wie:

  • WebStorm / PHPStorm
  • Vim
  • Emacs

Weiteres unterstützen auch diverse Online Editoren Emmet wie zum Beispiel:

  • JSFiddle
  • JSBin
  • CodePen

Die oben aufgeführten Listen sind nur ein kleiner Auszug der unterstützen Editoren. Eine vollständige Liste ist unter http://emmet.io/download/ zu finden.

HTML Abkürzungen

Nachdem wir jetzt hoffentlich mit unserem Lieblings Tool arbeiten können, möchte ich etwas näher auf die Funktion von Emmet eingehen.

Elemente

Das Prinzip der HTML Abkürzungen ist recht einfach. Man muss nur den Tag Namen zum Beispiel h1 oder p eingeben und danach sie TAB Taste drücken und schon erscheint der korrekte Anfangs und End Tag. Um das Weiterarbeiten zu erleichtern steht der Cursor auch schon genau zwischen den Tags.

Klassen und IDs

Um einem Tag das class oder id Attribut mit einer oder mehreren Klassen hinzuzufügen, genügt es direkt nach dem Tag Namen (ohne Abstand) mit  .  oder  #  getrennt die Klassen oder ID Namen einzugeben.

Mit Klasse

Eingabe:

h1.myclass

Ausgabe:

<h1 class="myclass"></h1>

 

oder mit ID

Eingabe:

h1#myid

Ausgabe:

<h1 id="myid"></h1>

 

Natürlich lässt sich das ganze auch kombinieren:

Eingabe:

h1.myclass#myid

Ausgabe:

<h1 id="myid" class="myclass"></h1>

 

Gibt man nur einen Klassen oder ID Namen ein, also ohne Tag Name, dann wird automatisch ein div Tag generiert.

Emmet - Klassen und IDs
Emmet – Klassen und IDs

 

Verschachtelte (Kind / Child) Elemente

Das war aber noch nicht Alles. Wenn man mehr Code eingeben will, dann möchte man vielleicht nicht nach jedem Tag die TAB Taste drücken, sondern gleich mehrere Tags eingeben. Auch das ist mit Emmet kein Problem. Man muss dazu nur wissen, ob das nächste Element ein Kind oder ein Geschwister Element sein soll. Will man ein Kind (Child) Element haben, dann setzt man zwischen den einzelnen Tag das  >  Zeichen.

Eingabe:

#header>h1

Ausgabe:

<div id="header">
    <h1></h1>
</div>

 

Geschwister / Sibling Elemente

Soll das nächste Element ein  Geschwister Element (Sibling) sein – also direkt darunter, dann verwendet man ein  +  Zeichen. Auch hier wieder ein Beispiel dazu:

Eingabe:

h1+p

Ausgabe:

<h1></h1>
<p></p>

 

Element Kopien (Multiplikatoren)

Will man mehr als ein Element vom selben Tag haben, wie es zum Beispiel bei Listen üblich ist, so kann man mit dem Multiplikator arbeiten. Hier wird einfach nach dem Element, welches öfter eingefügt werden soll mit einem  *  und einer Zahl angegeben wie oft dieses generiert werden soll.

Eingabe:

ul>li*5

Ausgabe:

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

 

Zähler

Recht praktisch ist es, dass man sehr einfach Nummerierungen einfügen kann. So kann man zum Beispiel die verwendeten Klasssen nummerieren und das mit nur einem Zeichen, dem  $ .

Eingabe:

ul>li.myliclass$*5

Ausgabe:

<ul>
    <li class="myliclass1"></li>
    <li class="myliclass2"></li>
    <li class="myliclass3"></li>
    <li class="myliclass4"></li>
    <li class="myliclass5"></li>
</ul>

 

Blind Text einfügen

Oft benötigt man für Projekte, vor allem in der Prototyp Phase diverse Blindtexte. Man muss dazu nicht mehr irgendwelche Webseite mit Lorem Ipsum Texten aufsuchen und von dort kopieren, man kann diese in Emmet sehr einfach mit dem Wort  Lorem  erzeugen.

Eingabe:

p>Lorem

Ausgabe:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente rem, ut. Debitis soluta molestias, quibusdam nulla dolorum nisi obcaecati id vel inventore nemo, tempore, qui minus. Dicta voluptatem, porro quod.</p>

 

Die Anzahl der Wörter lässt sich sich durch eine Zahl direkt hinter  Lorem  angeben.

Eingabe:

ul>li*5>lorem5

Ausgabe:

<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Rem blanditiis eveniet nobis esse.</li>
<li>Omnis itaque, provident dignissimos asperiores!</li>
<li>Modi quo rem, fugiat exercitationem.</li>
<li>Voluptate nam tempore minus, delectus.</li>
</ul>
Emmet - Lorem Ipsum Text
Emmet – Lorem Ipsum Text

 

Dies waren einmal die wichtigsten Funktionen die Emmet im Bereich HTML Abkürzungen bietet. Es ist natürlich noch eine Menge mehr möglich, das würde aber den Rahmen dieses Beitrages etwas sprengen. Für all jene, die mehr über die Möglichkeiten von Emmet wissen möchten, habe ich einen Kurs vorbereitet, in dem Schritt für Schritt alle Funktionen erklärt werden. Wenn Ihr beim Kurs Start dabei sein wollt, dann meldet euch doch bitte bei meinem Kurs Newsletter am Ende des Beitrages an.

CSS Abkürzungen

Was für HTML Abkürzungen geht, geht auch für CSS Abkürzungen.

 m  erzeugt zum Beispiel ein  margin: ; 

Etwas erweitert bekommt man mit  m10p  als Ergebnis  margin: 10px; 

Noch etwas erweitert wird  m10-20-5-5  zu  margin: 10px 20px 5px 5px; 

Emmet - CSS
Emmet – CSS

 

Für die Einheiten gilt die einfache Regel:
Kein Buchstabe nach der Zahl ergibt px
Ein  p  erzeugt Prozent
Ein  e  wird zu em

 

Auch Farbwerte lassen sich wunderbar abkürzen, so erzeugt zum Beispiel ein

 c#F  den Code  color: #FFF; 

 

Der manchmal dringend benötigte !important Zusatz kann durch eine einfaches  !  Erzeugt werden. wie zum Beispiel bei:

Eingabe:

 m10! 

Ausgabe:

 margin: 10px !important; 

 

Weitere Beispiele für CSS Attribute
 w  =>  width 
 b  =>  border 

 

Sind spezielle Angaben für verschiedene Browser notwendig, wie zum Beispiel bei der transform Eigenschaft, so werden diese Zeilen ebenfalls automatisch erzeugt.

Eingabe:

 trf 

Ausgabe:

 -webkit-transform: ; 
 -ms-transform: ; 
 -o-transform: ; 
 transform: ; 

 

Der Nachteil der CSS Abkürzungen gegenüber den HTML Abkürzungen ist, dass man hier doch etwas länger benötigt um die entsprechenden Abkürzungen zu lernen. Aber wenn man es eine Zeit lang anwendet wird man bald den grossen Vorteil schätzen lernen.

Eine komplette Auflistung der möglichen Abkürzungen gibt es übrigens im Cheat Sheet das vom emmet.io  bereit gestellt wird:

http://docs.emmet.io/cheat-sheet/

Aktionen

Mit dem beschriebenen Abkürzungen ist das Ende der Leistungen von Emmet aber noch nicht erreicht. Es gibt auch noch die Aktionen, die das Leben beim Code schreiben um einiges erleichtern können.

Dienen die Abkürzung vor allem dazu, Code schneller eingeben zu können, bieten im Gegensatz dazu die Aktionen die Möglichkeit schneller mit dem bestehenden Code arbeiten zu können.

Aktionen haben allerdings einen Nachteil gegenüber den bereits erwähnten Abkürzungen. Da Aktionen mit unterschiedlichen Tastenkombinationen arbeiten, gibt es zum Teil Schwierigkeiten mit bereits vorbelegten Funktionen im verwendeten Editor oder aber auch vom verwendeten Betriebssystem. Dies führt dazu, dass sich die Tastenkombinationen je nach verwendeten Editor von den Original Tasten Kombinationen abweichen. Da man aber meist mit dem selben Editor arbeitet, wird dieses Problem in der Praxis wahrscheinlich nicht so schlimm sein.

Ich möchte im folgenden nur einige der interessantesten Kombination erwähnen. Mehr Informationen gibt es auf der Emmet Website oder in meinen Emmet Kurs.

Als Beispiel für die unterschiedliche Belegung habe ich die originalen Kombinationen und darunter jene vom Editor Brackets aufgeschrieben.

 

Edit Points

Mit dieser Tastenkombination kann man zu Stellen springen, wo möglicherweise noch Daten eingegeben werden sollen. Das sind

zwischen leeren Tags
leeren Attributen oder
leeren Zeilen

Nächster Edit Punkt:

Emmet: CTRL
Brackets:  

Voriger Edit Punkt:

Emmet: CTRL
Brackets:

 

Matching Tag Pair

Springt zum gegenüberliegenden Anfangs oder End Tag:

Emmet: T
Brackets: T

 

Remove Tag

Entfernt Tags rum um ein Element:

Emmet: K
Brackets: K

 

Rename Tag

Benennt Tags rum um ein Element um:

Emmet: K
Brackets: I

 

Increase / Decrease Numbers

Erhöht bzw. vermindert eine Zahl um 1:

Emmet: CTRL und CTRL
Brackets: und

Erhöht bzw. vermindert eine Zahl um 10:

Emmet: CTRL und CTRL
Brackets: und

 

Math Expressions

Löst einen mathematische Ausdruck:

 4+1  =>  
 4/2  =>  

Diese Funktion kann vor allem bei CSS Files sehr praktisch sein um Werte zu errechnen

Emmet: Y
Brackets: Y
Sublime:   Y

Diese Auswahl an Beispielen sollte zeigen, wie leistungsfähig und praktisch die Aktionen von Emmet sind.

 

Zusammenfassung

Wir ihr sehen konntet, hilft Emmet wirklich extrem gut rascher mit HTML und CSS Code zu arbeiten. Dabei gibt es sowohl Funktionen zum Erstellen, als auch zum Editieren. Für den einen oder anderen Bereich ist etwas Einarbeitungszeit notwendig, aber dieser Aufwand lohnt sich mit Sicherheit.

Dieser Artikel sollte einen ersten Überblick geben wie leistungsfähig Emmet ist. Eine detailliertere Beschreibung zum Umgang mit Emmet bekommt Ihr in meinem Online Kurs, der im nächsten Monat Online gestellt wird.

Wenn Ihr diesen Kurs nicht verpassen wollte, dann tragt euch doch bitte in meinen Kurs Newsletter ein und ihr werdet rechtzeitig zum Start des Kurses darüber informiert.

Also besonderen Bonus erhalten die ersten 50 Newsletter Anmelder den Kurs kostenlos – also am besten sofort anmelden.

 

cta-gratis-emmet-kurs

Picture of Andreas Stocker

Andreas Stocker

Andreas hat 25 Jahre Webagentur Erfahrung und gibt jetzt sein Wissen weiter, wie man selbst einen erfolgreichen Webauftritt umsetzt und betreut.

Dieser Beitrag hat 2 Kommentare

  1. Erich Wolf

    Unter „Was ist Emmet“ wird beschrieben, wie man durch Eingabe von ! eine Grundstruktur einer Webseite erzeugen kann. Wie kann ich zusätzlich den folgenden Code erzeugen?

Schreibe einen Kommentar