Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Zen-Coding ist der neuste Trend in Bezug auf effektives und schnelles HTML- und CSS Markup. Mittels Online-Editoren oder Plugins für bekannte Programme wie Coda, Textmate, Espresso oder Dreamweaver wird eine Kurzform für HTML und CSS geschrieben die anschließend automatisch in das gewünschte Markup umgewandelt wird.

Zen-Coding heißt jetzt Emmet

Das in diesem Artikel beschriebene Zen-Coding nennt sich mittlerweile Emmet, funktioniert nach wie vor wie hier beschriebenen und steht ebenfalls als Plugin für alle gängigen Editoren zur Verfügung: emmet.io

Zen-Coding

Zen-Coding ist der Überbegriff für die beiden Bestandteile Zen-Html und Zen-CSS. Beide Teile greifen auf die neusten Versionen von HTML (HTML5) und CSS (CSS3) zurück und ermöglichen mittels deutlich kürzerer Eigenschaften sowie der Vergabe von Variablen einen deutlich beschleunigten Workflow.
Momentan ist Zen-Coding in Form von Plugins für folgende Online-Editoren verfügbar:

Zen-HTML

Damit Ihr einen besseren Eindruck bekommt wovon ich hier die ganze Zeit spreche, ein paar Beispiele für HTML-Markup mittels Zen Coding.

Zen-HTML:

a

Generiertes HTML-Markup:

<a href=""></a>

Zen-HTML:

li.classname-$*5>a

Generiertes HTML-Markup:

<li class="classname-1"></li>
<li class="classname-2"></li>
<li class="classname-3"></li>
<li class="classname-4"></li>
<li class="classname-5"></li>

Zen-HTML:

html:xt

Generiertes HTML-Markup:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
</head>
<body>

</body>
</html>

Eine komplette Auflistung aller Zen-HTML-Eigenschaften findet sich auf Google Code.

Zen-CSS

Ebenso wie für HTML funkionieren auch die CSS-Zen-Eigenschaften.

Zen-CSS:

fl

Generierter CSS-Code:

float:;

Zen-CSS:

bdt+

Generierter CSS-Code:

border-top:1px solid #000;

Zen-CSS:

op:ie

Generierter CSS-Code:

filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);

Eine komplette Auflistung aller Zen-CSS-Eigenschaften findet sich ebenfalls auf Google Code.

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 5 Kommentare

  1. Zen-Coding – Cooler, schneller, besser? - Netzlogbuch
    schrieb am 22.12.2009 um 16:10 Uhr:

    […] Mehr Beispiele und Online-QUellen zum Thema Zen-Coding gibt es auf kulturbanause.de. […]

    Antworten
  2. Friedrich Schultheiß
    schrieb am 04.12.2009 um 18:38 Uhr:

    Danke ta2edchimp, hat geklappt! ;-)

    Antworten
  3. ta2edchimp
    schrieb am 02.12.2009 um 17:10 Uhr:

    @Friedrich Schultheiß:
    In der Regel gibt’s dann irgendwo (bspw. unter einem Menü namens „Commands“ o.ä. – je nach verwendetem Editor) nen Befehl „Expand Abbreviations“, den du dir ggf. auf ein Tastenkürzel packen kannst.

    Antworten
  4. Friedrich Schultheiß
    schrieb am 01.12.2009 um 18:48 Uhr:

    Zen-Coding hört sich wirklich gut und v.a. zeitsparend an! Habe mir das Plugin sofort heruntergeladen.
    Doch was mich noch interessieren würde… wie wandelt man nun eigtl. diese Kürzel in Code um? Bei diesem Punkt bin ich leider nicht ganz mitgekommen!

    Antworten
  5. Thomas Borowski
    schrieb am 29.11.2009 um 21:24 Uhr:

    Von Zen Coding habe ich auch gerade letzte Woche zum ersten Mal erfahren. Mein erster Eindruck war auch: geil. Nur muss man sich nach jahrelangem Handcoding erstmal auf das neue System umstellen, und das dauert.

    Etwas irritiert war ich zunächst von den Bundles für TextMate. Da Zen HTML z.B. die gleichen Trigger bzw. Shortcuts verwendet, wie das Original-HTML-Bundle, muss man sich für das eine oder andere entscheiden, da ansonsten bei jedem mehrdeutigen Shortcut ein Auswahl-Menü erscheint und das bremst den Arbeitsfluss zu stark.

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →