Code zu schreiben ist für Webdeveloper tägliche Routine. Dabei steht die Effizienz und Schnelligkeit immer mehr im Fokus. Dabei ist wohl nichts nerviger, als Dinge wie <option> immer und immer wieder eintippen zu müssen. Mit Emmet besteht die Möglichkeit, den Workflow zu beschleunigen.
Man stelle sich vor, einfach eine Zeile Code zu schreiben und dann Ctrl + E (oder andere unterstützte Shortcuts) zu drücken. Nun erweitert Emmet die Abkürzung in eine komplexe HTML und CSS Struktur. Das spart Zeit und man kann sich mehr auf irgendetwas Wichtigeres konzentrieren.
Dieses Tool ist sehr hilfreich, wenn man viel mit HTML oder CSS arbeitet. Es verändert die Art und Weise, wie man Webseiten kreiert. Emmet gibt es für alle gängigen Texteditoren wie:
- Dreamweaver
- SublimeText,
- Coda, Brackets
- Eclipse
- Expresso
- und viele mehr
Auch viele Online-Services wie jsfiddle, codepen, codio etc. unterstützen Emmet.
Wie funktioniert Emmet?
Emmet zu erlernen ist einfach. Es basiert auf einer CCS ähnlichen Selektor Syntax. Nachdem man eine Abkürzung geschrieben hat, wird der Cursor ans Ende gestellt und Tab (oder eine andere Tastaturabkürzung) gedrückt. Wenn man zum Beispiel a schreibt und Tab drückt, wird es erweitert auf: <a href=""></a>
Sehen wir uns die Syntax nun im Detail an.
Verschachteln Operatoren:
Child: >
Wird verwendet, um verschiedene Elemente ineinander zu verschachteln.
Sibling: +
Wird verwendet, um Elemente nebeneinander zu platzieren (selbes DOM Level).
Climb-up: ^
Im Unterscheid zum Child Operator > wird dieser verwendet, um eine Ebene nach oben zu steigen. Man kann mehrere Operatoren verwenden, um so viele Ebenen wie gewünscht nach oben zu wechseln.
Multiplikation: *
Wird verwendet, um zu definieren, wie oft ein Element wiederholt werden soll.
Gruppierung: ( )
Man kann viele Elemente gruppieren, indem man Klammern verwendet. Dies ist besonders nützlich, wenn man aufeinander folgende Elemente auf derselben Stufe wie die Gruppe haben will. Man kann auch viele ^ Operatoren verwenden (dies ist jedoch unpraktisch).
Attribut Operatoren
Diese Operatoren werden verwendet, um Attribute von HTML oder XML Elementen zu modifizieren.
#ID und .Class
Diese Operatoren sind folgenden CSS Selektoren sehr ähnlich: element#id oder element.class.
Die gleiche Syntax kann für die Erstellung von Elementen mit spezifischen class oder id Attributen Verwendung finden.
Custom Attribute: [attr]
Custom Attribute funktionieren auf dieselbe Weise wie der CSS Attribut Selektor:
- Emmet – Custom Attribute
Objekt Nummerierung: $
Noch interessanter wird es, wenn man wiederholende Elemente betrachtet, die sich nur in Bezug auf die Nummerierung unterscheiden. Das bedeutet Folgendes:
Man kann auch die Richtung der Nummerierung oder ihre Basis verändern, in dem man @ oder - verwendet.
Text: {}
Manchmal ist es hilfreich, wenn man Text zwischen den einzelnen Elementen anzeigt. Durch die Verwendung von {} Operatoren kann dieser Text archiviert werden. Man muss beachten, dass ein Unterschied bei der Verwendung eines child Operators mit folgendem Operator besteht.
CSS Abkürzungen
Wenn man Emmet verwendet, braucht man sich um das richtige Vendor-Präfix keine Sorgen mehr zu machen. Man tippt einfach die Eigenschaft ein, und Emmet erledigt die restliche Arbeit.
Ein anderes, sehr nützliches Feature, sind sehr kurze Abkürzungen (manchmal nur 2 Buchstaben), welche zu einer korrekten CSS Eigenschaft ausgedehnt werden.
Weitere Features von Emmet
Emmet enden aber nicht hier. Es stellt uns Shortcuts zur Verfügung, welche uns helfen, Code viel schneller und effektiver zu schreiben.
Man kann Elemente ineinander einschließen, zu übereinstimmenden Paaren gehen, einzelne Elemente durch andere ersetzen und vieles mehr.
Die offizielle Dokumentation von Emmet enthält noch weitere Informationen. Man sollte nicht zögern und es einfach mal ausprobieren. Mit Sicherheit wird man angenehm überrascht werden und sich bald fragen, wie man bisher überhaupt ohne dieses Tool arbeiten konnte.
