How I fell in love with Emmet…

Mario Tutorial , ,
0

…oder schnell und effizient HTML coden

Dieses kleine Mini-Tutorial macht Ihnen hoffentlich Lust auf mehr.

Man kann mit Emmet sehr schnell und effizient HTML coden. Gerade wenn man viel mit Bootstrap arbeitet und ständig grids verwendet, spart Emmet viel Zeit.

In den meisten Code-Editoren (Coda, phpstorm, Visual Studio…) ist Emmet bereits enthalten oder kann als plugin nachgerüstet werden. Siehe auch die Original Website -> emmet.io. Dort gibt es übrigens ein wunderbares emmet-cheat-sheet.

Was macht Emmet genau?

Fangen wir mir einem einfachen Beispiel einer Tabelle an. Aus einer kurzen Zeile table>tr>td*4 wird eine Tabelle mit einer Row und 4 Zellen:

Mit > kommt man zum child-element und das *4 heisst erstelle 4 der vorhergehenden Elemente, in unserem Fall vier <td></td>. Das geht natürlich mit allen Elementen. Man tippt die Zeile und am Ende der Zeile drückt man auf tab und Emmet erstellt den code.

Möchte man eine Reihe von divs erzeugen die alle einen unterschiedlichen ID haben kann man mit dem $ Zeichen eine automatische Nummerierung einfügen. Dadurch lassen sich schon recht komplexe Gerüste erstellen.

Im folgenden Beispiel erstelle ich ein Bootstrap grid mit 6 Zellen. In jede Zelle kommt eine unordered List mit 12 Listelementen, die wiederum durchgezählte Klassen und IDs besitzen. Übrigens, schreibt man nur den Klassennamen mit einem Punkt davor dann geht Emmet davon aus, dass es sich um ein div handelt.

.container>.row>.col-sm-2#dragon$*6>ul>li.item$#dragon-force$*12

Mit dem + kann man mehrere Elemente auf dieselbe Ebene setzen.

Das ! erstellt uns ein HTML Grundgerüst, nimmt man nun alles zusammen kann man schon fast eine komplette Website mit einer Zeile erstellen.
Im folgenden und letzten Beispiel erstelle ich ein HTML Grundgerüst und eine Bootstrap Navbar. Der ^ Operator springt in der Hierarchie ein Element nach oben. Gut, ob dieses Beispiel jetzt so praktikabel ist sei mal dahin gestellt. Für so etwas nimmt man dann vielleicht doch besser Code-Snippets die ja auch schon jeder Codeeditor beherrscht. Aber als Beispiel für Emmet ist es allemal brauchbar.
!>nav.navbar.navbar-default>.container>.navbar-header>button.navbar-toggle[type=button][data-toggle=collapse][data-target=.navbar-collapse]>span.sr-only+span.icon-bar*3^a.navbar-brand>img^^.navbar-collapse.collapse>ul.nav.navbar-nav.navbar-right>li#*5>a

Hats Ihnen gefallen oder haben Sie noch irgendwelche Anregungen oder Fragen? Dann schreiben Sie mir in den Kommentaren eine Nachricht und ich antworte so schnell wie möglich!

Schreibe einen Kommentar