Yet Another Article about Tag Soup

Tag Soup is when you have unnecessary html elements surrounding your content. It happens all the time in order to produce styling affects or to enable javascript functionality.

For instance - implementing rounded corners in CSS implies that you must have a box object, and at least one other box object defined inside it. If you want a resizeable layout, that implies at least three additional and unnecessary (for content) boxes.

If you do this a couple of times, pretty soon your html is entirely unreadable. Since I've been playing with vBulletin lately, I've seen more than my fair share of tag soup lately. The application is designed with so many nested tables, it's hard to keep track of where you are. I'm simply not going to try to completely simplify vBulletin's templates. That would mean that any time there is an upgrade, I would have to go through it again - at least to a degree.

But what I am doing is adding functionality to vBulletin, and it behooves me to not make things worse than they already are.

One thing I've been doing is playing around a little bit with ajax and some visual effects. One visual effect in particular requires a series of three wrapper divs in order to deal with some browser "features" (i.e. bugs). I could very well go into the templates and insert these HTML elements, but my practical side says not to. It's much cleaner to create those elements with javascript on an as needed basis. The effects themselves are javascript based, so I won't be missing out on anything if a client does not have javascript enabled.

Enter Scriptaculous and it's Builder function. It makes creating divs via DOM a one liner, and creating nested divs is pretty simple.

   uber_wrapper = Builder.node('div',{id: 'uberwrapper'});
   wrapper = Builder.node('div',{id: 'wrapper'});
   mydiv  = Builder.node('div',{className: 'ajaxreply',id: 'myid'});
   wrapper.appendChild(mydiv);
   uber_wrapper.appendChild(wrapper);

That wasn't so hard, was it? Combining this kind of functionality with Behaviour opens up a whole new world of opportunity for code cleanup. Now if I could just find a way to clean up vBulletin...