Ett ton diskussion har nyligen givits till förprocessorer. Dessa otroligt användbara verktyg gör kodning enklare, snabbare och mer underhållbar, men de är verkligen inte för alla. Oavsett huruvida du har hoppat på preprocessorvagnen bör du ge en ny titt på en gammal favorit som hjälper dig att dramatiskt minska din kodningstid utan att uppfinna ditt arbetsflöde med kompilatorer och andra komplikationer: Zen Coding.
Med Zen-kodning kan du skriva lite och skriva ut mycket, precis som med en förprocessor som Jade eller Haml, bara den expanderar direkt till vaniljhtml som du älskar. För de som är nya för konceptet, går jag igenom hur Zen Coding fungerar och visar dig några av mina favoritstickor, och avslutar med en kort handledning om hur du får Zen Coding att fungera i Sublime Text 2.
Zen kodning vs förprocessorer
Zen kodning har funnits i ett antal år, så flera av er som läser detta är tvungna att tro att det här är för gammal skola för att få en diskussion 2012, men jag är villig att satsa på att många nya kodare aldrig har givit det ett skott.
Jag börjar med att säga vad Zen Coding inte är: det är inte en förbehandlare i samma ån som LESS, Sass, Stylus, Jade, Haml och liknande. Det finns dock likheter. Som alla dessa har Zen Coding en unik syntax som syftar till att förenkla processen för kodning av HTML och CSS.
I motsats till de andra verktygen lägger Zen Coding emellertid inga speciella funktioner som variabler eller mixins, och det kräver inte några extra filer som måste köras via en kompilator. Zen Coding matar ut HTML och CSS direkt, ingen har något möjligt sätt att ens veta att du använde det genom att titta på din kod.
Kanske en närmare parallell är TextExpander, en app som? Expanderar? korta textutdrag till större. I grund och botten är Zen Coding som en jätte uppsättning förbyggda textexpansionsmakroner som är konstruerade specifikt för HTML- och CSS-kodare.
Hur fungerar det?
Nog förklaring, låt oss hoppa in och utforska den faktiska syntaxen bakom Zen Coding. Om du är bekant med HTML, CSS och DOMs koncept, är du säker på att du hämtar det direkt.
Låt oss börja med HTML-sidan eftersom jag tror det är där nästan all den verkliga fördelen ligger. Som vårt första grundläggande exempel, låt oss säga att vi ville skapa en enkel div med ett container-ID, så här är hur vi skulle göra det:
Om du är bekant med Haml ser du genast att några av de samma konventionerna används här. Först jag skrev namnet på det element som jag ville ha, i det här fallet en div, då använde jag CSS-liknande syntax för att infoga en hashtag för att indikera att jag hänvisar till ett ID. Slutligen följde jag hashtag med den faktiska texten som jag ville ha tilldelats ID:? Behållaren ?.
Som du kan se skär jag nästan mina obligatoriska inskrivningar i halv för det här kodspecifika kodstycket. Jag behövde inte bryta mig med några start- och stängningsfästen eller citat, istället har strukturen avlägsnats till ett minimum.
Vi kan använda denna kunskap som en hoppa av punkt för andra liknande utdrag. Låt oss säga att jag vill skapa en punkt med en given klass. Syntaxen är ungefär densamma, bara jag använder en period för att indikera en klass (igen, precis som CSS).
Kedja, syskon och barn
Att spara en handfull karaktärer är pittoreskt, men vad händer om du är en seriös utvecklare som kan skriva allt detta i sömnen i ett sekund? Är detta Zen kodning saker verkligen kommer att vara allt som är användbart?
Svaret är en rungande? Ja.? Faktum är att ju mer komplexa din kodstruktur blir, ju mer användbar finner du Zen Coding att vara! Den verkliga kraften här ligger i förmågan att kedja ihop olika delar.
Som du kan se är det lätt att skapa både barn och syskon med Zen Coding-syntaxen. Stackar med CSS-temat är syskon anslutna till? +? symbol och barn använder?> var13 ->? symbol.
Detta ger en enorm mängd tid och besparingspotential. Spela runt med detta i några minuter och din hjärna börjar snabbt tänka på strukturen i HTML-dokument på så sätt. Innan du vet det, skriver du långa, avancerade sekvenser som expanderar till fina, feta bitar av kod.
Zen CSS
Zen Coding är inte bara för HTML, det hjälper dig också att koda CSS. För att vara ärlig använder jag inte denna aspekt av Zen-kodning för mycket, helt enkelt för att de flesta anständiga textredigerare har så bra CSS automatiskt att jag spenderar väldigt lite tid på att manuellt skriva ut egenskaper ändå (även CSS-autokompletterar tenderar att konkurrera med och överväga Zen-kodning). Samma argument kan sägas om HTML, men här finner jag Zen Coding att vara mycket snabbare än den automatiskt färdiga rutten.
Ändå är det här hela min personliga åsikt, du kanske tycker att du absolut älskar CSS-sidan av Zen Coding. Här är ett exempel på hur det fungerar:
Som du kan se, innebär CSS-sidan vanligen att du skriver ut initialerna för egenskapen, följt av ett kolon och initialerna för värdet att tilldela egenskapen. Som du kan gissa, det finns massor av CSS-egenskaper som stöds, så memorering här är mycket svårare än med HTML-sidan. Var noga med att kolla in fuskplåtarna.
Mina Favorit HTML Makroer
Zen Coding cheat sheet kan vara ganska överväldigande med tanke på att det finns så mycket i det, för att hjälpa dig att få dig att koppla från början, här är några av mina favoritmakroner.
HTML5 Starter
Vill du starta ett nytt HTML-dokument med en ren skiffer? Skriv bara? Html: 5? och du kommer till en stark start.
Stylesheet Include
När du startar den fina HTML-filen, vill du kasta i ett stilark. Lyckligtvis kan du göra det i en jiffy.
JavaScript inkluderar
En enda för huvuddelen av ditt dokument. När du har fått stilarket tränat, är det dags att kasta i JavaScript.
Ankaretiketter
En av mina första frågor om Zen Coding var, hur fungerar länkar? Haml är faktiskt ganska besvärligt när det gäller någon form av inline-element och attribut så jag var orolig att detta kan vara detsamma.
Men istället för att komma med ett komplicerat schema för att infoga länktexten och webbadressen skriver du helt enkelt? A? och ankarets kärnstruktur är skapad och klar för att du ska kunna fylla i. Det kan nog vara lite bättre, men det är lätt att komma ihåg!
Multiplicera element
Zen Coding har ett praktiskt multiplikator-trick som gör det enkelt att skapa ett visst antal specifika element. Återigen är processen väldigt intuitiv, använd bara? *? symbol och numret på det element du vill skapa.
Ökningsnummer
Ett annat riktigt coolt trick som du kan dra av när du multiplicerar elementen är att inkludera ett inkrementellt tal i klassen eller ID-värdet. För att göra detta, implementerar du? $? symbol.
Hur gör jag detta arbete?
Zen Coding stöds i massor av olika textredigerare och är ibland till och med inbyggd, vilket är fallet med Espresso. Var noga med att kolla på Zen Coding Google Project Page för att ladda ner plugin-programmen till din redaktör.
Så här installerar du Zen-kodning på Sublime Text 2
Jag har definitivt blivit biten av Sublime Text buggen. Jag älskar helt enkelt den här textredigeraren och kan inte få nog av sin utsträckning och flexibilitet. Ett snabbt och enkelt sätt att göra Sublime Text 2 ännu bättre är att lägga till Zen Coding support.
För att göra detta måste du ta bort den fria sublima paketkontrollhämtningen från Will Bond. Detta är en fantastisk pakethanterare som gör att det är enkelt att hitta och installera Sublime text plugins.
När du har installerat, klicka på Command + Shift + P (Command = Control for PC-folks) för att hämta kommandopaletten och skriv ordet? Install? Du borde se ett objekt som säger? Paketkontroll: Installera paket ?, tryck på enter på det alternativet.
Härifrån, skriv? Zen kodning? och du borde se paketet. Tryck helt enkelt på igen och paketet kommer att installeras (starta om det inte träder i kraft). Starta ett nytt HTML-dokument, skriv ut en förkortning, klicka på fliken och kolla på magiken (se till att din syntax är inställd på HTML eller det fungerar inte).
Sublim text är redan en fantastisk redaktör och använder det tillsammans med Zen Coding får mig bara att le. Det är en mördarkombination som du inte vill missa på.
Användar du Zen kodning?
För att vara ärlig saknade jag verkligen båten på Zen Coding när den var populär för ett par år sedan. Jag hittade alltid espressointegrationen för att vara lite clunky och sedan det var min redaktör som valde jag aldrig utforskat det vidare. Nu när jag är på Sublime Text älskar jag hur snabbt jag kan använda Zen-kodning för att byta ut en komplex HTML-struktur utan krångel med taggar, avkastningar och liknande.
Vad tror du? Använder du Zen-kodning för din HTML? Föredrar du det över att använda en förprocessor för att göra något liknande? Vad sägs om din CSS? Tycker du att Zen Coding är användbart för att skriva CSS eller är du bra med auto-complete?