Zen Coding in Visual Studio 2012/2013

Ja, richtig gelesen! “Zen Coding”. Bevor Ihr Euch fragt, was diese Strömung des Buddhismus mit der Webentwicklung in Visual Studio zu tun hat, möchte ich den Zen-Meister “Suzuki Shunryu” zitieren:

„Zen ist nicht etwas Aufregendes, sondern Konzentration auf deine alltäglichen Verrichtungen.“

Um diese “alltäglichen” Verrichtungen eines Webentwicklers geht es jetzt. In den kultigen Web Essentials für Visual Studio gibt es das Feature Zen Coding, welches zum Ziel hat schnelleres HTML zu schreiben mit einer CSS Selector ähnlichen Syntax.

Wie oft haben wir z.B. schon “Lorem Ipsum” Texte kopiert und eingesetzt? Genau! Zu oft.

   1:  lorem

 

Nun die TAB – Taste und voila

   1:  Lorem ipsum dolor sit amet, consectetur adipiscing elit

 

Hier eine kleine Auswahl der Syntaxauflistung (jeweils immer mit TAB zur Ausführung):

  • # (Raute) erstellt ein ID – Attribut
    (z.B.  div#container  => <div id="container"></div>)
  • . (der Punkt) erstellt ein class Attribut
    (z.B. div.test => <div class="test"></div>)
  • [] erstellet ein benutzerdefiniertes Attribut
    (z.B. input[type="text" placeholder="Bitte Namen eingeben"] => 
    <input type="text" value="" placeholder="Bitte Namen eingeben" />)
  • > erstellt ein Kind-Element 
    (z.B. table>tr>td =>
    
    <table>
        <tr>
            <td></td>
        </tr>
    </table>
  • * multipliziert ein Element

    (z.B. ul>li*5 =>
    
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
  • $$ erstellt Zahlen mit führender 0 (inkrementell)
    (z.B. ul>li*3>a.item$$*1 =>
    <ul>
        <li>
            <a href="" class="item01"></a>
        </li>
        <li>
            <a href="" class="item02"></a>
        </li>
        <li>
            <a href="" class="item03"></a>
        </li>
    </ul>
  • {} erstellt Text innerhalb eines Elements
    (z.B. ul>li*3>a{Punkt$$} =>
    <ul>
        <li>
            <a href="">Punkt01</a>
        </li>
        <li>
            <a href="">Punkt02</a>
        </li>
        <li>
            <a href="">Punkt03</a>
        </li>
    </ul>

Ein klassisches Beispiel ist eine Navigationsstruktur in HTML5. Man nehme ein nav –Element mit der id “navigation” und einer ungeordneten Liste, welche wiederrum 5 Listenelemente beinhaltet, die 5 Links haben mit der Klasse “links” und einem hochzählenden Text

nav#navigation>ul>li*5>a.links{Link$$} =>
<nav id="navigation">
    <ul>
        <li>
            <a href="" class="links">Link01</a>
        </li>
        <li>
            <a href="" class="links">Link02</a>
        </li>
        <li>
            <a href="" class="links">Link03</a>
        </li>
        <li>
            <a href="" class="links">Link04</a>
        </li>
        <li>
            <a href="" class="links">Link05</a>
        </li>
    </ul>
</nav>

Bei dem ZenCoding wäre natürlich zu beachten, dass eine zu komplexe Beschreibungssyntax den Sinn und das eigentliche Ziel des Zen verfehlt. Happy meditation…

Kommentare sind geschlossen