In letzter Zeit wurde eine Tonne Diskussion für Preprozessoren geführt. Diese unglaublich nützlichen Tools machen das Codieren einfacher, schneller und wartungsfreundlicher, aber sicherlich nicht für jedermann. Unabhängig davon, ob Sie auf den Vorprozessor-Zug gezogen sind oder nicht, Sie sollten einem alten Favoriten ein frisches Aussehen verleihen, mit dem Sie die Codierungszeit drastisch verkürzen können, ohne Ihren Workflow mit Compilern und anderen Komplikationen neu zu erfinden: Zen Coding.
Mit Zen Coding können Sie ein wenig tippen und viel ausgeben, genau wie bei einem Präprozessor wie Jade oder Haml. Nur er erweitert sich sofort in den Vanille-HTML-Code, den Sie lieben. Für diejenigen, die neu im Konzept sind, gehe ich Ihnen durch die Funktionsweise von Zen Coding und zeige Ihnen einige meiner Lieblingstricks. Anschließend ende ich mit einem kurzen Tutorial, wie Sie Zen Coding in Sublime Text 2 zum Laufen bringen.
Zen-Kodierung vs. Vorprozessoren
Zen Coding gibt es schon seit einigen Jahren. Einige von Ihnen, die dies lesen, werden wahrscheinlich denken, dass dies zu alt ist, um eine Diskussion im Jahr 2012 zu verdienen, aber ich bin sicher, dass viele neue Codierer dies nie gegeben haben ein Schuss.
Ich fange damit an, zu sagen, was Zen Coding nicht ist: Es ist kein Präprozessor in der gleichen Richtung wie LESS, Sass, Stylus, Jade, Haml und dergleichen. Es gibt jedoch Ähnlichkeiten. Wie alle diese hat Zen Coding eine einzigartige Syntax, die das Codieren von HTML und CSS vereinfachen soll.
Im Gegensatz zu diesen anderen Tools fügt Zen Coding jedoch keine speziellen Features wie Variablen oder Mixins hinzu und erfordert keine zusätzlichen Dateien, die durch einen Compiler laufen müssen. Zen Coding gibt HTML und CSS sofort aus. Niemand hat die Möglichkeit, zu wissen, dass Sie es verwendet haben, indem Sie Ihren Code betrachten.
Eine nähere Parallele ist vielleicht TextExpander, eine App, die "erweitert". kurze Textausschnitte in größere. Im Grunde ist Zen-Codierung wie ein riesiger Satz von vorgefertigten Text-Erweiterungsmakros, die speziell für HTML- und CSS-Codierer entwickelt wurden.
Wie funktioniert es?
Genug Erklärungen, lassen Sie uns die eigentliche Syntax hinter Zen Coding untersuchen. Wenn Sie mit HTML, CSS und dem Konzept des DOM vertraut sind, werden Sie es sicher sofort aufgreifen.
Beginnen wir mit der HTML-Seite, weil ich glaube, dass hier fast der ganze Nutzen liegt. Angenommen, wir wollten ein einfaches div mit einer ID des Containers erstellen. So würden wir es tun:
Wenn Sie mit Haml vertraut sind, werden Sie sofort feststellen, dass hier einige der gleichen Konventionen verwendet werden. Zuerst habe ich den Namen des gewünschten Elements eingegeben, in diesem Fall ein div, und dann die CSS-artige Syntax zum Einfügen eines Hashtags verwendet, um anzuzeigen, dass ich auf eine ID verweise. Schließlich folgte ich dem Hashtag mit dem eigentlichen Text, den ich der ID zuweisen wollte: "container".
Wie Sie sehen, habe ich fast meine erforderliche Eingabe für diesen Code-Ausschnitt halbiert. Ich musste mich nicht mit Anfangs- und Schlussklammern oder Anführungszeichen beschäftigen, sondern die Struktur wurde auf ein Minimum reduziert.
Wir können dieses Wissen als Ausgangspunkt für ähnliche Schnipsel verwenden. Angenommen, ich möchte einen Absatz mit einer bestimmten Klasse erstellen. Die Syntax ist so ziemlich die gleiche, nur ich benutze eine Periode, um eine Klasse anzuzeigen (genau wie CSS).
Verkettung, Geschwister und Kinder
Das Speichern einer Handvoll Charaktere ist komisch, aber was ist, wenn Sie ein seriöser Entwickler sind, der im Schlaf alles in Sekundenschnelle eingeben kann? Ist dieses Zen-Coding-Zeug wirklich so nützlich?
Die Antwort ist ein klares Ja. Je komplexer Ihre Codestruktur wird, desto hilfreicher wird Zen Coding! Die eigentliche Kraft liegt hier in der Fähigkeit, verschiedene Elemente miteinander zu verketten.
Wie Sie sehen, ist es einfach, sowohl Kinder als auch Geschwister mit der Zen-Coding-Syntax zu erstellen. Beim CSS-Thema bleiben Geschwister mit dem? +? Symbol und Kinder verwenden das?> var13 ->? Symbol.
Dies eröffnet enorm viel Zeit und Aufwand, um Einsparungen zu erzielen. Spielen Sie ein paar Minuten damit und Ihr Gehirn wird schnell anfangen, die Struktur von HTML-Dokumenten auf diese Weise zu betrachten. Bevor Sie es wissen, tippen Sie lange, fortgeschrittene Sequenzen, die sich zu schönen, fetten Code-Abschnitten erweitern.
Zen CSS
Zen-Codierung ist nicht nur für HTML, sondern auch für die Codierung von CSS. Um ehrlich zu sein, verwende ich diesen Aspekt von Zen Coding nicht zu oft, weil die meisten anständigen Texteditoren so gute automatische CSS-Vervollständigung haben, dass ich ohnehin sehr wenig Zeit damit verbringe, Eigenschaften manuell einzugeben (auch die automatische CSS-Vervollständigung neigt dazu, sich zu messen mit und überschreiben Zen Coding). Dasselbe Argument könnte man über HTML sagen, aber hier finde ich, dass Zen-Coding viel schneller ist als die Auto-Completion-Route.
Dies ist jedoch nur meine persönliche Meinung, Sie mögen die CSS-Seite von Zen Coding absolut lieben. Hier ist ein Beispiel, wie es funktioniert:
Wie Sie sehen, müssen Sie auf der CSS-Seite normalerweise die Initialen der Eigenschaft eingeben, gefolgt von einem Doppelpunkt und den Initialen des Werts, den Sie der Eigenschaft zuweisen möchten. Wie Sie sich vorstellen können, werden eine Menge CSS-Eigenschaften unterstützt, sodass das Auswendiglernen hier viel schwieriger ist als auf der HTML-Seite. Schauen Sie sich die Spickzettel an.
Meine bevorzugten HTML-Makros
Der Zen Coding Spickzettel kann ziemlich überwältigend sein, da es so viel in ihm gibt. Um Ihnen zu helfen, gleich von Anfang an süchtig zu machen, hier ein paar meiner Lieblingsmakros.
HTML5-Starter
Möchten Sie ein neues HTML-Dokument mit einem sauberen Fenster beginnen? Geben Sie einfach? Html: 5? und du wirst einen guten Start haben.
Stylesheet Include
Wenn Sie diese frische HTML-Datei starten, sollten Sie sie in einem Stylesheet ablegen. Zum Glück können Sie dies im Handumdrehen tun.
JavaScript-Include
Noch eine für den Kopfteil Ihres Dokuments. Nachdem Sie das Stylesheet ausgearbeitet haben, ist es Zeit, JavaScript zu verwenden.
Anker-Tags
Eine meiner ersten Fragen bezüglich Zen Coding lautete: Wie funktionieren Links? Haml ist eigentlich ziemlich umständlich, wenn es um Inline-Elemente und -Attribute geht. Ich hatte also die Befürchtung, dass dies möglicherweise genauso ist.
Anstatt jedoch ein kompliziertes Schema für das Einfügen des Linktextes und der URL festzulegen, geben Sie einfach? A? und die Kernstruktur des Ankers wird erstellt und zum Ausfüllen vorbereitet. Möglicherweise ist es etwas besser, aber zumindest ist es leicht zu merken!
Elemente multiplizieren
Zen Coding bietet einen praktischen Multiplikator-Trick, der das Erstellen einer bestimmten Anzahl bestimmter Elemente vereinfacht. Wieder einmal ist der Prozess sehr intuitiv, verwenden Sie einfach das? *? Symbol und die Nummer des Elements, das Sie erstellen möchten.
Inkrementnummer
Ein weiterer wirklich cooler Trick, den Sie ziehen können, während Sie Elemente multiplizieren, besteht darin, eine zunehmende Zahl in den Klassen- oder ID-Wert aufzunehmen. Um dies zu tun, implementieren Sie das? $? Symbol.
Wie mache ich das?
Zen Coding wird in einer Vielzahl verschiedener Texteditoren unterstützt und ist gelegentlich sogar eingebaut, wie es bei Espresso der Fall ist. Besuchen Sie die Zen-Coding-Google-Projektseite, um die Plugins für Ihren Editor herunterzuladen.
So installieren Sie die Zen-Codierung für überflüssigen Text 2
Ich wurde definitiv vom Sublime Text Bug gebissen. Ich liebe diesen Texteditor einfach und kann von seiner Erweiterbarkeit und Flexibilität nicht genug bekommen. Eine schnelle und einfache Möglichkeit, Sublime Text 2 noch besser zu machen, ist das Hinzufügen von Zen-Coding-Unterstützung.
Dazu benötigen Sie den kostenlosen Download der Sublime Package Control von Will Bond. Dies ist ein fantastischer Paket-Manager, der das Finden und Installieren von Sublime-Text-Plugins unglaublich einfach macht.
Sobald Sie das installiert haben, drücken Sie Befehlstaste + Umschalttaste + P (Befehl = Steuerung für PC-Leute), um die Befehlspalette aufzurufen und geben Sie das Wort "install" ein. Sie sollten ein Element mit der Aufschrift "Paketsteuerung: Paket installieren" sehen. Drücken Sie die Eingabetaste für diese Option.
Geben Sie hier "Zen Coding" ein. und Sie sollten das Paket sehen. Drücken Sie einfach erneut die Eingabetaste, um das Paket zu installieren (starten Sie es erneut, wenn es nicht wirksam wird). Starten Sie ein neues HTML-Dokument, geben Sie eine Abkürzung ein, drücken Sie die Tabulatortaste und beobachten Sie die Magie (stellen Sie sicher, dass Ihre Syntax auf HTML eingestellt ist oder nicht funktioniert).
Sublime Text ist bereits ein fantastischer Editor und die Verwendung von Zen Coding bringt mich einfach zum Lächeln. Es ist eine Killer-Kombination, die Sie nicht missen möchten.
Verwenden Sie Zen-Codierung?
Um ehrlich zu sein, habe ich das Boot auf Zen Coding wirklich vermisst, als es vor einigen Jahren beliebt war. Ich fand die Espresso-Integration immer etwas klobig, und da dies meine Wahl war, habe ich sie nie weiter untersucht. Jetzt, da ich mich mit Sublime Text beschäftige, finde ich es einfach toll, wie schnell ich Zen Coding verwenden kann, um eine komplexe HTML-Struktur zu entfernen, ohne dass Tags, Rückgaben und ähnliches erforderlich sind.
Was denkst du? Verwenden Sie Zen-Code für HTML? Ziehen Sie es vor, einen Präprozessor zu verwenden, um etwas Ähnliches zu tun? Wie wäre es mit Ihrem CSS? Denken Sie, dass Zen-Codierung nützlich ist, um CSS einzugeben, oder geht es Ihnen mit Auto-Completion?