Do you use any tools for rapid html/css development?

Question

I just heard about zen-coding, which basically is just a script that generates markup based on a css-esque selector, ex:

div#foo > p*6

generates

<div id="foo">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>

Edit: Here's a more advanced example..

And PS - I'm not even going through any API, I'm totally guessing based on my CSS selector knowledge, this is very easy and intuitive for me.

ul#nav > li[id] * 6 > a

Generates

<ul id="nav">
    <li id="">
        <a href=""></a>
    </li>
    <li id="">
        <a href=""></a>
    </li>
    <li id="">
        <a href=""></a>
    </li>
    <li id="">
        <a href=""></a>
    </li>
    <li id="">
        <a href=""></a>
    </li>
    <li id="">
        <a href=""></a>
    </li>
</ul>

when you hit a shortcut such as Ctrl-E. Very very useful if you do a lot of front end development. I had the idea of the exact opposite, a CSS selector generator which basically parses markup and generates selectors so one can go in a tool such as Firebug and rapidly see live changes on the dot, I just never bothered to actually finish the script I had started.

It's currently supported in TextMate, Dreamweaver, Aptana, NetBeans, unfortunately not vim/emacs however there is a fork named sparkup which works on vim ( I use that now ).

I'm wondering if anyone has come across such plugins or tools in the past - I'm aware that there are snippet scripts in Vim/Textmate/Emacs and other powerful editors, just curious of what else is out there in the wild.

Answer 1

Hm. I write a lot of HTML and CSS every day and I am not excited. The paragraph you mention I write in five seconds, and six times Ctrl+C and Ctrl+V. Granted, there may be scenarios when a meta language will save more time but I have never felt the need for one. When there are really massive amounts of HTML - or SQL, or arrays - to produce, I will write a small PHP or VB script for the task. I wouldn't want another meta-language to produce something in another language.

Maybe useful for others but not for me.

If discussion about the general usefulness was what you were looking for. Reading your post a second time, I'm not that sure any more. Anyway. :)

Answer 2

If you are developing rails, check out Sass and Haml

Sass can do use variables and do basic math:

// Sass

!blue = #3bbfce
!margin = 16px

.content_navigation
  border-color = !blue
  color = !blue - #111

.border
  padding = !margin / 2
  margin = !margin / 2
  border-color = !blue

renders:

/* CSS */

.content_navigation {
  border-color: #3bbfce;
  color: #2aaebd;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

Haml uses indentation instead of divs and matches the css # and . system for labeling classes and divs:

#profile
  .left.column
    #date= print_date
    #address= current_user.address
  .right.column
    #email= current_user.email
    #bio= current_user.bio

renders to:

<div id="profile">
  <div class="left column">
    <div id="date"><%= print_date %></div>
    <div id="address"><%= current_user.address %></div>
  </div>
  <div class="right column">
    <div id="email"><%= current_user.email %></div>
    <div id="bio"><%= current_user.bio %></div>
  </div>
</div>