has_many :thoughts

While beginning a new project today, I quickly discovered that the HTML and CSS files supplied by the designer were clearly auto-generated from a program like Dreamweaver.

It soon became apparent that dealing with nearly half a dozen nested tables and a mess of a CSS (with some of the same font declarations repeated 10 times) was going to be a nightmare.

I undertook the task of rebuiding in real CSS with semantic markup and XHTML. It’s taken about 3 hours for the rough cut. I still have some tweaking for IE and such but basically, it’s done. It’s clearly, far easier to read now. But I’ll let the numbers speak for themselves:

• 371 lines
• 13,213 chrs

• 279 lines
• 7,173 chrs

That’s nearly a 45% reduction in the number of characters. One place in particular went from looking like this in the Firebug Inspect window:

 div < td < tr < tbody < table < td < tr < tbody < table < div <
td < tr < tbody < td < tr < tbody < table < td < tr < table < body < html 

 div < div < body < html