Oft heißt es: „Ich kann ja mal eben eine Prototypseite oder einen Proof of Concept zusammen bauen.“ Nicht selten ist „mal eben“ aber dann doch eigentlich zu lang. Wenn man weiß wie, kann es aber wirklich sehr schnell gehen.
Dank Online-Editoren wie CodePen.io geht das Ausprobieren von CSS-Eigenschaften an einem kleinen DOM-Schnipsel schon schnell und komfortabel. Seit kurzem kenne ich allerdings Emmet.io, was von CodePen.io schon vor geraumer Zeit implementiert wurde.
Emmet stellt uns Webentwicklern eine extrem nützliche und vor allem kurze Syntax zur Verfügung, um HTML und CSS zu generieren. Noch Fragen? Wir helfen gerne!
Beispiel (Navigation)
Möchte ich einen Prototypen einer Navigation erstellen, beginne ich in der Regel mit folgender HTML-Struktur.
<nav>
<ul>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</nav>
CodePen kann obiges HTML mit folgender Anweisung erzeugen.
nav>ul>li*4>a[href="#"]{Item}Einfach diese Zeile eintippen und Tab drücken – wow, oder? Auch für CSS-Regeln gibt es Kurzschreibweisen, die man sich für effizientes Prototyping zu Nutze machen kann.
Beispiel (CSS)
ul {
lis:n
}
a {
d:b
p1rem
bgc
}
/* erzeugt */
ul {
list-style: none;
}
a {
display: block;
padding: 1rem;
background-color: #fff;
}Die Befehle verinnerlicht man sicherlich am besten, wenn man täglich in seiner Lieblings-Entwicklungsumgebung damit arbeiten kann. Die Eingewöhnung nimmt bestimmt eine gewisse Zeit in Anspruch, welche durch die neue Arbeitsweise aber vermutlich recht schnell wieder amortisiert wird.
Ein beliebter Einsatz sind auch größere Tabellen, die man z. B. im Kontext von responsiven Tabellen gerne austestet.
Beispiel (Tabelle)
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
...
</tr>
...
</tbody>
</table>
Emmet
Vielen Dank an Sergey Chikuyonok, der uns Emmet kostenfrei zur Verfügung stellt. Dank einiger weiterer Entwickler ist Emmet bereits in vielen Editoren und IDEs verfügbar, vielleicht auch in deiner?
Wie kann ich die Syntax lernen?
Ich glaube die beste Übersicht über die Features von Emmet bietet das Cheat-Sheet. Emmet umfasst neben den wenigen oben gezeigten Möglichkeiten noch viele weitere coole Features sowie andere Hilfsmittel zur effizienten Code-Bearbeitung. Eine gute Anlaufstelle hierfür ist natürlich auch die offizielle Dokumentation.
Aufgepasst: Nicht alle Features sind in jedem der Editor-Plugins implementiert – hier musst du ggf. recherchieren, falls es mal nicht so klappen sollte wie erwartet. Gerne können wir aushelfen!
Kommentare