The Blessings of CSS
I’ve spent so long coding with CSS from the beginning, that I’d forgotten how much it can cut down old code.
Yesterday I started to redo a whole chunk of code from works website thats been bugging me since I started. Its a static template, that we can update as we wish depending on what products we want on the prominent home page. The only problem, a huge mess of HTML, a dozen tables to show 10 products and 2 headings. 320ish lines of code in the HTML in all, a nightmare when I got a request to change 1 or more of the products on the home page.
So, yesterday I decided to do something about it. Rather than trying to hack about with what was there, I just worked out the size area I had to use (its a fixed width site with 2 fixed width sidebars) and set about starting the whole chunk from scratch.
I decided to use one table for the overall structure of the section. It would be nice to get rid of the tables from the site, but realistically, thats not going to happen untill it gets a complete redesign. I’m thinking a 12:1 ratio isn’t bad. Most of the rest of the styling is then done in CSS (a couple little bits of HTML Table styling used, but considering the state of the rest of the site, I wasn’t too fussed about spending the time working those minor points out) with a few little tweaks to the actual design of the section.
The end result? Around 80 lines of HTML and CSS thats about half a KB in size.
Much more semantic as well, and most importantly to me, many times more easy to update in the future as we start to try and rotate the front page products more.
Time taken to do that? 2/3 hours maybe, some of which wasn’t coding so much, as filling it up with the right product info and images.
In a little while, its going to be strange to people looking at the code of the site. Half of it will be hugely table heavy, little CSS, spacer images and all that old style crap. In amoungst this will be oasis’ of sparse HTML markup, nicely styled by external (and generally invalidly linked) style sheets. Some calm from the storm of tables all around.