kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Zen-Coding – beschleunigt euren HTML/CSS-Workflow

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.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!

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:

  • TextMate, Mac
  • Aptana, crossplatform
  • Coda, Mac
  • NetBeans, crossplatform
  • Espresso, Mac
  • Web IDE, crossplatform
  • TopStyle, Windows
  • Sublime Text, Windows
  • Dreamweaver, crossplatform

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.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

5 Kommentare

  1. Thomas Borowski

    Verfasst am 29. November 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.

  2. Friedrich Schultheiß

    Verfasst am 1. Dezember 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!

  3. ta2edchimp

    Verfasst am 2. Dezember 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.

  4. Friedrich Schultheiß

    Verfasst am 4. Dezember 2009 um 18:38 Uhr.

    Danke ta2edchimp, hat geklappt! ;-)

Schreibe einen Kommentar zu Friedrich Schultheiß Antworten abbrechen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.