Zen Coding isn’t only a decent abbreviation engine, it also provides some very useful actions for HTML-coder’s every day needs, like: Wrap with Abbreviation, Tag Balancing, Toggle Comment, Remove Tag etc. To better understand how Zen Coding works, watch demo video and read Smashing Magazine tutorial. div tag name can be omitted when writing element starting from ID or CLASS: #content>.section is the same as div#content>div.section.You can literally write a full document markup with just a single line. Abbreviation groups with unlimited nesting: div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer.Multiple ‘$’ characters in a row are used as zero padding, i.e.: li.item$$$ → li.item001.Item numbering with $ character: li.item$*3 will output tag three times, replacing $ character with item number.Element multiplication: li*5 will output tag five times.Zen Coding currently supports CSS, HTML, XML/ XSL and HAML languages via filters. Read more about current Zen Coding syntaxĪbbreviation engine has a modular structure which allows you to expand abbreviations into different languages.
