Das ist ein ultra-praktische Template-Plugin, das einem beim Schreiben von HTML unglaublich viel Tipparbeit abnimmt. Die Grundidee ist, dass man statt HTML-Tags CSS-Selektoren hinschreibt (also z.B. div.MeineKlasse statt <div class="MeineKlasse"></div>) und dies dann vom Plugin in die eigentlichen Tags expandieren lässt, die man dann nur noch mit Inhalt füllen muss.
Ein paar kleine Beispiele:
div.InfoBereich>span#firstWarning<HOTKEY>
... gibt ...
<div class="InfoBereich">
<span id="firstWarning"></span>
</div>
Das ganze kann man auch weiter treiben, und z.B. Elemente vervielfachen:
div#page>div.logo+ul#navigation>li*5>a<HOTKEY>
.... gibt...
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
Außderdem gibts noch praktische Abkürzungen für typische Aufgaben wie "Scheib einen HTML-Header hin".
html:xt
... gibt ...
<!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="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
</head>
<body>
</body>
</html>
Für wen gibts das? Praktischerweise für die allermeisten populären Editoren (inklusive vim, textmate, Eclipse, Netbeans).
Ressourcen:
- offizielle Zen-Coding-Homepage: http://code.google.com/p/zen-coding/
- inoffizielles VIM-Plugin: http://www.vim.org/scripts/script.php?script_id=2981
- Cheat Sheet: http://zen-coding.googlecode.com/files/ZenCodingCheatSheet.pdf
Keine Kommentare:
Kommentar veröffentlichen