Can’t Get Into Preprocessors? Try Zen Coding

by on 22nd May 2012 with 24 Comments

screenshot

A ton of discussion lately has been given to preprocessors. These incredibly useful tools make coding easier, faster and more maintainable, but they’re certainly not for everyone. Whether or not you’ve jumped on the preprocessor bandwagon, you should give a fresh look to an old favorite that helps you dramatically cut your coding time without reinventing your workflow with compilers and other complications: Zen Coding.

With Zen Coding, you can type a little and output a lot, just like with a preprocessor like Jade or Haml, only it expands instantly into the vanilla HTML that you love. For those that are new to the concept, I’ll walk you through how Zen Coding works and show you some of my favorite tricks, then end with a brief tutorial on getting Zen Coding up and running in Sublime Text 2.

Zen Coding vs. Preprocessors

Zen Coding has been around for a number of years, so several of you reading this are bound to think that this is too old school to merit a discussion in 2012, but I’m willing to bet that lots of new coders have never given it a shot.

screenshot

I’ll start by saying what Zen Coding isn’t: it isn’t a preprocessor in the same vein as LESS, Sass, Stylus, Jade, Haml and the like. There are similarities though. Like all of these, Zen Coding has a unique syntax that is aimed at simplifying the process of coding HTML and CSS.

However, unlike those other tools, Zen Coding doesn’t add any special features such as variables or mixins, nor does it require any extra files which have to be run through a compiler. Zen Coding outputs HTML and CSS immediately, no one has any possible way of even knowing that you used it by looking at your code.

Perhaps a closer parallel is TextExpander, an app that “expands” brief text snippets into larger ones. Basically, Zen Coding is like a giant set of prebuilt text expansion macros built specifically for HTML and CSS coders.

How Does It Work?

Enough explanation, let’s jump in and explore the actual syntax behind Zen Coding. If you’re at all familiar with HTML, CSS and the concept of the DOM, I’m sure you’ll pick it up immediately.

Let’s start with the HTML side because I think that’s where almost all of the real benefit lies. As our first basic example, let’s say we wanted to create a simple div with an ID of container, here’s how we would do it:

screenshot

If you’re familiar with Haml, you’ll immediately see that some of the same conventions are used here. First I typed the name of the element that I wanted, in this case a div, then I used the CSS-like syntax of inserting a hashtag to indicate that I’m referring to an ID. Finally, I followed the hashtag with the actual text that I wanted assigned to the ID: “container”.

As you can see, I very nearly cut my required typing in half for this particular snippet of code. I didn’t have to bother with any starting and closing brackets or quotes, instead the structure has been stripped to a bare minimum.

We can use this knowledge as a jumping off point for other similar snippets. For instance, let’s say I want to create a paragraph with a given class. The syntax is pretty much the same, only I use a period to indicate a class (again, just like CSS).

screenshot

Chaining, Siblings and Children

Saving a handful of characters is quaint, but what if you’re a serious developer who can type all of that in your sleep in the span of a second? Is this Zen Coding stuff really going to be all that useful?

The answer is a resounding “yes.” In fact, the more complex your code structure becomes, the more helpful you’ll find Zen Coding to be! The real power here lies in the ability to chain together different elements.

screenshot

As you can see, it’s easy to create both children and siblings with the Zen Coding syntax. Sticking with the CSS theme, siblings are connected with the “+” symbol and children use the “>” symbol.

This opens up a massive amount of time and effort saving potential. Play around with this for a few minutes and your brain will quickly begin to think of the structure of HTML documents this way. Before you know it, you’ll be typing long, advanced sequences that expand into nice, fat chunks of code.

screenshot

Zen CSS

Zen Coding isn’t just for HTML, it also helps you code CSS. To be honest, I don’t use this aspect of Zen Coding too much simply because most decent text editors have such good CSS auto-complete that I spend very little time manually typing out properties anyway (also, CSS auto-complete tends to compete with and override Zen Coding). The same argument could be said of HTML, but here I find Zen Coding to be much faster than the auto-complete route.

Still, this is all my personal opinion, you might find that you absolutely love the CSS side of Zen Coding. Here’s an example of how it works:

screenshot

As you can see, the CSS side usually involves you typing out the initials of the property, followed by a colon and the initials of the value to assign to the property. As you might guess, there are a ton of CSS properties supported so memorization here is much trickier than with the HTML side. Be sure to check out the cheat sheets.

My Favorite HTML Macros

The Zen Coding cheat sheet can be pretty overwhelming given that there’s so much in it, so to help get you hooked right from the start, here are some of my favorite macros.

HTML5 Starter

Want to start a new HTML document with a clean slate? Simply type “html:5″ and you’ll be off to a strong start.


html:5


 

  
   



Stylesheet Include

Once you start that fresh HTML file, you’ll want to toss in a stylesheet. Fortunately, you can do so in a jiffy.


link:css



JavaScript Include

One more for the head portion of your document. After you’ve gotten the stylesheet worked out, it’s time to toss in the JavaScript.


script:src



Anchor Tags

One of my first questions regarding Zen Coding was, “how do links work?” Haml is actually pretty awkward when it comes to any sort of inline elements and attributes so I was worried that this might be the same.

However, instead of coming up with a complicated scheme for inserting the link text and URL, you simply type “a” and the core structure of the anchor is created and made ready for you to fill in. It could probably be a little better, but at least it’s easy to remember!


a





a:link



Multiply Elements

Zen Coding has a handy multiplier trick that makes it easy to create a certain number of a specific elements. Once again, the process is very intuitive, just use the “*” symbol and the number of the element that you’d like to create.


p*3


ul>li.someclass*4

Increment Number

Another really cool trick that you can pull off while multiplying elements is to include an incrementing number in the class or ID value. To do this, you implement the “$” symbol.


ul>li.someclass-$*5


How Do I Make This Work?

Zen Coding is supported in tons of different text editors and is occasionally even built in, as is the case with Espresso. Be sure to check the Zen Coding Google Project Page to download the plugins for your editor.

How To Install Zen Coding on Sublime Text 2

screenshot

I’ve definitely been bitten by the Sublime Text bug. I simply love this text editor and can’t get enough of its extensibility and flexibility. One quick and easy way to make Sublime Text 2 even better is to add Zen Coding support.

To do this, you’ll need to grab the free Sublime Package Control download from Will Bond. This is an awesome package manager that makes finding and installing Sublime text plugins incredibly easy.

screenshot

Once you’ve got that installed, hit Command+Shift+P (Command = Control for PC folks) to bring up the Command Palette and type the word “install”. You should see an item that says “Package Control: Install Package”, hit enter on that option.

screenshot

From here, type “Zen Coding” and you should see the package. Simply hit enter again and the package will be installed (restart if it doesn’t take effect). Start a new HTML document, type out an abbreviation, hit tab, and watch the magic (make sure your syntax is set to HTML or it won’t work).

Sublime text is already a fantastic editor and using it conjunction with Zen Coding just makes me smile. It’s a killer combination that you won’t want to miss out on.

Do You Use Zen Coding?

To be honest, I really missed the boat on Zen Coding when it was popular a couple of years ago. I always found the Espresso integration to be a little clunky and since that was my editor of choice, I never explored it further. Now that I’m on Sublime Text I just love how quickly I can use Zen Coding to bust out a complex HTML structure without the hassle of tags, returns and the like.

What do you think? Do you use Zen Coding for your HTML? Do you prefer it over using a preprocessor to do something similar? How about with your CSS? Do you think Zen Coding is useful for typing CSS or are you fine with auto-complete?

Comments & Discussion

24 Comments

Comments & Discussion

24 Comments

  1. Bobby says:

    can you explain in detail how to install zen coding into sublime 2? i already installed the package then when i type “html:5″ nothing is appear. i tried ctrl + space or alt + space but it didn’t change. help please.

  2. vleran says:

    if u installed Package Controle: hit Command+Shift+P (Command = Control for PC) ant type Zen Coding and hit enter :)

  3. vleran says:

    or if u installed zenCoding u first need to open a new file and save it as html or php to use the ZenCoding in ST2!

  4. Bobby says:

    okay problem solved! thx Vleran. and thx Joshua for the article :)

  5. Stéphanie says:

    Very nice article that made me finaly want to try it myself after months of hearing about it.

    @Bobby Yeah I got the same problem, I checked online and finaly had an answer : ” You have to set syntax to HTML or something else. ” (topic http://www.sublimetext.com/forum/viewtopic.php?f=2&t=2633#p12261)
    So basically : set the syntax to HTML, and then hit ctrl + space (windows) and that works !!

  6. Joshua Johnson says:

    Thanks guys! I updated the article so everyone knows that you must have your syntax set properly for this to work. Cheers!

  7. Preprocessor and Zen coding are totally different thing. SASS, LESS and HAML are languages.

  8. egiova says:

    I had heard of SublimeText, but I’d never tried it before. Looks cool.
    A bit nightmarish to install PackageControl under Windows7x64. SublimeText2 appears to be installed in two different folders: programm files and program filesx86 (buit-in partition-!?-no idea if it’s particular to my laptop or what) then, my keyboard is set on spanish language, switch it to EN, time to find correct install folder, then seeking for correct package (following SublimeText indications on their site, and checking for correct install folder again) for “package control”…then checking install again, etc., but finally I found a way to make it works (Viiiictooooryyyy!).
    At first sight, I have to say that for building HTML pages, the Zen syntax is a wonder.
    About CSS, just as you said, I’m not sure it helps a lot, lake of practice maybe, but I use to code on Notepad C++, and old habbits die last, so we’ll see.
    I also saw the possibility of installing a package “Zurb Foundation Framework”, do you have tested this package? Your opinion on this would be very interesting to listen. If you’re interested of course.
    But thanks for another good post (I’m almost tired to repeat this again and again, but… well… it’s just true). ;)

  9. This is awesome I wanted an excuse to switch over from Espresso to Sublime Text 2 think I just found one.

  10. loktar says:

    I’m using it for a while now as a netbeans plug-in, and by now I just can’t code html without it. I think it’s a freakin awesome tool !

  11. Benny Jien says:

    @Patrick You can use Zen Coding on Espresso, too. I have been using it for a while.

  12. Nimsrules says:

    I’ve been using Zen Coding since it’s inception and have saved hours and hours of time. The best part is it has plugins for almost every IDE. From Notepad++ to Dreamweaver you’ve got it all.

  13. murph says:

    Please help!

    When I hit Command+Shift+P and select “Package Control:Install Package”, all i get is this:

    “Package Control: There are no packages available for installation.”

    Whats wrong (I have restarted BTW…makes no difference). Im running Lion OS X.

    Thanks

  14. SIBONAR says:

    How to use Zen Coding CSS in Notepad++ ?

  15. Hank Wang says:

    I use Zen Coding on Komodo.

    Really awesome :)

  16. Allen Lawson says:

    I can’t get in to any of this. Is it wrong that I like doing it the ol’ fashion way? I dunno, I’m stuck in my ways…

  17. ‘Simply type “html:5″ and you’ll be off to a strong start.’

    Au contraire, mon capitaine. That’s a weak start: In

    the language tag is wrong since there is no region ‘EN’. The region should not be specified in most cases anyway. ‘Always bear in mind that the golden rule is to keep your language tag as short as possible. Only add further subtags to your language tag if they are needed to distinguish the language from something else in the context where your content is used.’ [http://www.w3.org/International/questions/qa-choosing-language-tags]

    The correct value would be lang=”en” – for English content. If the content is in some other language the author must not forget to change the tag accordingly.

    The character encoding declaration should be at the top of the head element – before the title element. [http://www.w3.org/International/questions/qa-html-encoding-declarations]

    Why don’t the creators of such tools get the basics right?

  18. The code samples didn’t make it into my comment. I don’t like blogs that neither tell you what you are allowed to fill in nor provide a preview function. That leaves me with trial and error. Escapes maybe?

    …In

    <!DOCTYPE HTML> <html lang=”en-EN”>

    the language tag is wrong…

    <head>
    <title></title>
    <meta charset=”UTF-8″> </head>

    The character encoding declaration should be at the top…

  19. Jim Cook says:

    IntelliJ products also support zen coding out of the box. Thanks for the bringing up some of the functionality. Learned a few new tricks.

  20. murph says:

    Please help!

    When I hit Command+Shift+P and select “Package Control:Install Package”, all i get is this:

    “Package Control: There are no packages available for installation.”

    Whats wrong (I have restarted BTW…makes no difference). Im running Lion OS X.

    Thanks

  21. Brian Howard says:

    I have to agree with Jitendra Vyas. This was a good article to explain how Zen works and Zen Coding should be brought to the forefront – because it IS awesome. LESS and SASS and pre-processing really don’t even belong in this article and I wanted to make sure that people know that they can use both Zen and SASS in their projects.

  22. Duc Hong says:

    very nice article and I’m also using ST2 with Zen coding and SCSS for most of my projects. But I’m having an issue, since upgrading to the latest ST 2 version, it seems like I can’t get zen coding to work properly anymore, such as when I type “db”+ [TAB], usually it has display:block, now it doesn’t. anyone run into this same problem like me ?

Leave a Comment

Subscribe
Membership
About the Author