How much time do you spend writing HTML code: all of those tags, attributes, quotes, braces, etc. You have it easier if your editor of choice has code-completion capabilities, but you still do a lot of typing.
We had the same problem in JavaScript world when we wanted to access a specific element on a Web page. We had to write a lot of code, which became really hard to support and reuse. And then JavaScript frameworks came along, which introduced CSS selector engines. Now, you can use simple CSS expressions to access DOM elements, which is pretty cool.
But what if you could use CSS selectors not just to style and access elements, but to generate code? For example, what if you could write this…
…and see this as the output?
Today, we’ll introduce you to Zen Coding, a set of tools for high-speed HTML and CSS coding. Originally proposed by Vadim Makeev (article in Russian) back in April 2009, it has been developed by yours truly (i.e. me) for the last few months and has finally reached a mature state. Zen Coding consists of two core components: an abbreviation expander (abbreviations are CSS-like selectors) and context-independent HTML-pair tag matcher. Watch this demo video to see what they can do for you.
If you’d like to skip the detailed instructions and usage guide, please take a look at the demo and download your plugin right away:
Here is a list of supported properties and operators:
…and then call the Expand Abbreviation action.
There are two custom operators: element multiplication and item numbering. If you want to generate, for example, five
elements, you would simply write
elements, with an
The last one–item numbering is used when you want to mark a repeated element with its index. Suppose you want to generate three
We had the same problem in JavaScript world when we wanted to access a specific element on a Web page. We had to write a lot of code, which became really hard to support and reuse. And then JavaScript frameworks came along, which introduced CSS selector engines. Now, you can use simple CSS expressions to access DOM elements, which is pretty cool.
But what if you could use CSS selectors not just to style and access elements, but to generate code? For example, what if you could write this…
1 | div#content>h1+p |
1 | <div id="content"> |
2 | <h1> |
3 | <p> |
4 | |
If you’d like to skip the detailed instructions and usage guide, please take a look at the demo and download your plugin right away:
Demo
- Demo (use Ctrl + , to expand an abbreviation, requires JavaScript)
Downloads (Full Support)
- Aptana (cross-platform);
- Coda, via TEA for Coda (Mac);
- Espresso, via TEA for Espresso (Mac);
Downloads (Partial Support, “Expand Abbreviation” Only)
Now, let’s see how these tools work.[Editor's note: A must-have for professional Web designers and developers: The Printed Smashing Books Bundle is full of practical insight for your daily work. Get the bundle right away!]
Expand Abbreviation
The Expand Abbreviation function transforms CSS-like selectors into XHTML code. The term “abbreviation” might be a little confusing. Why not just call it a “CSS selector”? Well, the first reason is semantic: “selector” means to select something, but here we’re actually generating something, writing a shorter representation of longer code. Secondly, it supports only a small subset of real CSS selector syntax, in addition to introducing some new operators.Here is a list of supported properties and operators:
- E
Element name (div,p); - E#id
Element with identifier (div#content,p#intro,span#error); - E.class
Element with classes (div.header,p.error.critial). You can combine classes and IDs, too:div#content.column.width; - E>N
Child element (div>p,div#footer>p>span); - E+N
Sibling element (h1+p,div#header+div#content+div#footer); - E*N
Element multiplication (ul#nav>li*5>a); - E$*N
Item numbering (ul#nav>li.item-$*5);
1 | div#header>img.logo+ul#nav>li*4>a |
There are two custom operators: element multiplication and item numbering. If you want to generate, for example, five
li*5. It would repeat all descendant elements as well. If you wanted four li*4>a, which would generate the following output:1 | <li><a href=""> |
2 | <li><a href=""> |
3 | <li><a href=""> |
4 | <li><a href=""> |
elements with
Just add a dollar sign wherever in the class or ID property that you want the index to appear, and as many an you want. So, this…
would be transformed into:
You’ll see that when you write the
How does Zen Coding know when it should add default attributes to the generated tag or skip the closing tag? A special file, called zen_settings.js describes the outputted elements. It’s a simple JSON file that describes the abbreviations for each language (yes, you can define abbreviations for different syntaxes, such as HTML, XSL, CSS, etc.). The common language abbreviations definition looks like this:
With abbreviations, you have to write tag definitions, and the syntax is very important. Normally, you have to write a simple tag with all default attributes in it, like so:
For both snippets and abbreviations, you can ad a pipe character (|), which tells Zen Coding where it should place the cursor when the abbreviation is expanded. By default, Zen Coding puts the cursor between quotes in empty attributes and between the opening and closing tag.
We have made a lot of default CSS and HTML abbreviations and snippets. You may find that learning them increases your productivity with Zen Coding.
item1, item2 and item3 classes. You would write this abbreviation, div.item$*3:1 | <div class="item1"> |
2 | <div class="item2"> |
3 | <div class="item3"> |
1 | div#i$-test.class$$$*5 |
1 | <div id="i1-test" class="class111"> |
2 | <div id="i2-test" class="class222"> |
3 | <div id="i3-test" class="class333"> |
4 | <div id="i4-test" class="class444"> |
5 | <div id="i5-test" class="class555"> |
a abbreviation, the output is img, the output is ![]()
How does Zen Coding know when it should add default attributes to the generated tag or skip the closing tag? A special file, called zen_settings.js describes the outputted elements. It’s a simple JSON file that describes the abbreviations for each language (yes, you can define abbreviations for different syntaxes, such as HTML, XSL, CSS, etc.). The common language abbreviations definition looks like this:
Element Types
Zen Coding has two major element types: “snippets” and “abbreviations.” Snippets are arbitrary code fragments, while abbreviations are tag definitions. With snippets, you can write anything you want, and it will be outputted as is; but you have to manually format it (using\n and \t for new lines and indentation) and put the ${child} variable where you want to output the child elements, like so: cc:ie6>style. If you don’t include the ${child} variable, the child elements are outputted after the snippet.With abbreviations, you have to write tag definitions, and the syntax is very important. Normally, you have to write a simple tag with all default attributes in it, like so:
![]()
For both snippets and abbreviations, you can ad a pipe character (|), which tells Zen Coding where it should place the cursor when the abbreviation is expanded. By default, Zen Coding puts the cursor between quotes in empty attributes and between the opening and closing tag.
Example
So, here’s what happens when you write an abbreviation and call the “Expand Abbreviation” action. First, it splits a whole abbreviation into separate elements: so,div>a would be split into div and a elements, with their relationship preserved. Then, for each element, the parser looks for a definition inside the snippets and then inside the abbreviations. If it doesn’t find one, it uses the element’s name as the name for the new tag, applying ID and class attributes to it. For example, if you write mytag#example, and the parser cannot find the mytag definition among the snippets or abbreviation, it will output We have made a lot of default CSS and HTML abbreviations and snippets. You may find that learning them increases your productivity with Zen Coding.
HTML Pair Matcher
Another very common task for the HTML coder is to find the tag pair of an element (also known as “balancing”). Let’s say you want to select the entiretag and move it elsewhere or just delete it. Or perhaps you’re looking at a closing tag and want to known which opening tag it belongs to.
Unfortunately, many modern development tools lack support for this feature. So, I decided to write my own tag matcher as part of Zen Coding. It is still in beta and has some issues, but it works quite well and is fast. Instead of scanning the full document (as regular HTML pair matchers do), it finds the relevant tag from the cursor’s current position. This makes it very fast and context-independent: it works even with this JavaScript code snippet:
This function is pretty simple: it asks you to enter the abbreviation, then it performs the regular “Expand Abbreviation” action and puts your desired text inside the last element of your abbreviation. If you haven’t selected any text, it fires up the pair matcher and use the result. It also makes sense of where your cursor is: inside the tag’s content or within the opening and closing tag. Depending on where it is, it wraps the tag’s content or the tag itself.
Abbreviation wrapping introduces a special abbreviation syntax for wrapping individual lines. Simply skip the number after the multiplication operator, like so:
If you’ll wrap this abbreviation
You can see that Zen Coding is quite a powerful text-processing tool.
To make your editor support Zen Coding, you need to write a special plug-in that can transfer data between your editor and Zen Coding. The problem is that an editor may not have full Zen Coding support because of its plug-in system. For example, TextMate easily supports the “Expand Abbreviation” action by replacing the current line with the script output, but it can’t handle pair-tag matching because there’s no standard way to ask TextMate to select something.
The Coda and Espresso plug-ins are powered by the excellent Text Editor Actions (TEA) platform, developed by Ian Beck. The original source code is available at GitHub, but I made my own fork to integrate Zen Coding’s features.
Unfortunately, many modern development tools lack support for this feature. So, I decided to write my own tag matcher as part of Zen Coding. It is still in beta and has some issues, but it works quite well and is fast. Instead of scanning the full document (as regular HTML pair matchers do), it finds the relevant tag from the cursor’s current position. This makes it very fast and context-independent: it works even with this JavaScript code snippet:
1 | var table = ''
'
'
'
'; |
Wrapping With Abbreviation
This is a really cool feature that combines the power of the abbreviation expander with the pair tag matcher. How many times have you found that you have to add a wrapping element to fix a browser bug? Or perhaps you have had to add decoration, such as a background image or border, to a block’s content? You have to write the opening tag, temporarily break your code, find the appropriate spot and then close the tag. Here’s where “Wrap with Abbreviation” helps.This function is pretty simple: it asks you to enter the abbreviation, then it performs the regular “Expand Abbreviation” action and puts your desired text inside the last element of your abbreviation. If you haven’t selected any text, it fires up the pair matcher and use the result. It also makes sense of where your cursor is: inside the tag’s content or within the opening and closing tag. Depending on where it is, it wraps the tag’s content or the tag itself.
Abbreviation wrapping introduces a special abbreviation syntax for wrapping individual lines. Simply skip the number after the multiplication operator, like so:
ul#nav>li*>a. When Zen Coding finds an element with an undefined multiplication number, it uses it as a repeating element: it is outputted as many times as there are lines in your selection, putting the content of each line inside the deepest child of the repeating element.If you’ll wrap this abbreviation
div#header>ul#navigation>li.item$*>a>span around this text…About Us Products News Blog Contact UpYou’ll get the following result:
1 | <div id="header"> |
2 | <ul id="navigation"> |
3 | <li class="item1"><a href=""><span>About Us |
4 | <li class="item2"><a href=""><span>Products |
5 | <li class="item3"><a href=""><span>News |
6 | <li class="item4"><a href=""><span>Blog |
7 | <li class="item5"><a href=""><span>Contact Up |
8 | |
9 | |
Key Bindings
Ctrl+,
Expand AbbreviationCtrl+M
Match PairCtrl+H
Wrap with AbbreviationShift+Ctrl+M
Merge LinesCtrl+Shift+?
Previous Edit PointCtrl+Shift+?
Next Edit PointCtrl+Shift+?
Go to Matching Pair
Online Demo
You’ve learned a lot about how Zen Coding works and how it can make your coding easier. Why not try it yourself now, right here? Because Zen Coding is written in pure JavaScript and ported to Python, it can even work inside the browser, which makes it a prime candidate for including in a CMS.- Demo (use Ctrl + , to expand an abbreviation, requires JavaScript)
Supported Editors
Zen Coding doesn’t depend on any particular editor. It’s a stand-alone component that works with text only: it takes text, does something to it and then returns new text (or indexes, for tag matching). Zen Coding is written in JavaScript and Python, so it can run on virtually any platform out of the box. On Windows, you can run the JavaScript version of Windows Scripting Host. And modern Macs and Linux distributions are bundled with Python.To make your editor support Zen Coding, you need to write a special plug-in that can transfer data between your editor and Zen Coding. The problem is that an editor may not have full Zen Coding support because of its plug-in system. For example, TextMate easily supports the “Expand Abbreviation” action by replacing the current line with the script output, but it can’t handle pair-tag matching because there’s no standard way to ask TextMate to select something.
Full Support
- Aptana (cross-platform);
- Coda, via TEA for Coda (Mac);
- Espresso, via TEA for Espresso (Mac);
Partial Support (“Expand Abbreviation” Only)
- TextMate (Mac, and can be used with E-text editor for Windows);
- TopStyle;
- Sublime Text;
- GEdit;
- editArea online editor;
The Coda and Espresso plug-ins are powered by the excellent Text Editor Actions (TEA) platform, developed by Ian Beck. The original source code is available at GitHub, but I made my own fork to integrate Zen Coding’s features.
No comments:
Post a Comment