One for HTML/CSS geeks now. The Times relaunched its site yesterday. Today it seems to work. But look behind the scenes and you’ll find some of the most bizarre class names I’ve ever seen…
<div class="float-left width-385"><div class="float-left padding-top-5 padding-right-10 padding-bottom-10"><a href='/tol/comment/columnists/mick_hume/article1336502.ece'><img src="/multimedia/archive/00025/columnist_hume_25517a.jpg" alt="Mick Hume" width="70" height="70" border="0" /></a></div><!-- Tip: This must be on one line to prevent unwatned spacing in IE. --><div class="float-left width-286"><h2 class="sub-heading-puff color-06c header padding-top-5"><a class="link-06c" href='/tol/comment/columnists/mick_hume/article1336502.ece'>A virulent strain of self-loathing</a></h2><div class="padding-top-7"></div><p class="small">The bird flu outbreak is a reminder of the threat it poses in the UK to livelihoods rather than lives</p>
What was this person thinking? I don’t like to poke fun at the work of others — we all usually have to compromise along the way to meet deadlines and stuff — but this is crazy stuff. What’s the point of having abstracted CSS styles if you’re just going to put stuff like “color-06c” and “padding-top-7” in the HTML?
I’ll finish with this lengthy extract from one of the CSS files. I’d love to know how they came up with this…
/*** Top ***/
.padding-top-1 {
padding-top:1px;
}
.padding-top-2 {
padding-top:2px;
}
.padding-top-3 {
padding-top:3px;
}
.padding-top-4 {
padding-top:4px;
}
.padding-top-5 {
padding-top:5px;
}
.padding-top-6 {
padding-top:6px;
}
.padding-top-7 {
padding-top:7px;
}
.padding-top-9 {
padding-top:9px;
}
.padding-top-10 {
padding-top:10px;
}
/*** Right ***/
.padding-right-1 {
padding-right:1px;
}
.padding-right-2 {
padding-right:2px;
}
.padding-right-4 {
padding-right:4px;
}
.padding-right-7 {
padding-right:7px;
}
.padding-right-9 {
padding-right:9px;
}
.padding-right-10 {
padding-right:10px;
}
/*** Bottom ***/
.padding-bottom-3 {
padding-bottom:3px;
}
.padding-bottom-5 {
padding-bottom:5px;
}
.padding-bottom-7 {
padding-bottom:7px;
}
.padding-bottom-9 {
padding-bottom:9px;
}
.padding-bottom-10 {
padding-bottom:10px;
}
.padding-bottom-15 {
padding-bottom:15px;
}
/*** Left ***/
.padding-left-2 {
padding-left:2px;
}
.padding-left-3 {
padding-left:3px;
}
.padding-left-6 {
padding-left:6px;
}
.padding-left-9 {
padding-left:9px;
}
.padding-left-10 {
padding-left:10px;
}
.padding-left-11 {
padding-left:11px;
}
.padding-left-14 {
padding-left:14px;
}
.padding-left-15 {
padding-left:15px;
}
.padding-left-27 {
padding-left:27px;
}
.padding-left-29 {
padding-left:29px;
}
.padding-left-31 {
padding-left:31px;
}
/*** Top and Bottom ***/
.padding-top-5-bottom-4 {
padding-top:5px;
padding-bottom:4px;
}
/*** Left and Right ***/
.padding-left-right-1 {
padding-left:1px;
padding-right:1px;
}
.padding-left-right-5 {
padding-left:5px;
padding-right:5px;
}
.padding-left-right-7 {
padding-left:7px;
padding-right:7px;
}
.padding-left-right-9 {
padding-left:9px;
padding-right:9px;
}
.padding-left-right-10 {
padding-left:10px;
padding-right:10px;
}
.padding-left-right-14 {
padding-left:14px;
padding-right:14px;
}
/*** Top and Bottom + Left and Right ***/
/*** All 4 sides ***/
.padding-2 {
padding:2px;
}
.padding-4 {
padding:4px;
}
.padding-9 {
padding:9px;
}
.padding-10 {
padding:10px;
}
Comments
Commenting is disabled on posts once they’re 30 days old.
Martin Belam at 7 Feb 2007, 8:44am. Permalink
Now I feel so much better about my own HTML's class="tiny" fixation
Olly at 7 Feb 2007, 9:30am. Permalink
Shockingly bad. I feel they will be learning an important lesson the hard way ;)
Thanks for pointing it out...
Andy Stewart at 7 Feb 2007, 9:41am. Permalink
Maybe they have performance-related pay and Times Online measures its developers' performance by lines of code?
Jonathan at 14 Feb 2007, 12:57pm. Permalink
The Times seems to have had more than its fair share of nutbags on the web team over the years. I blogged about some of the insane stuff they were doing in their UI a couple of years ago. At least they've sorted that out, but now it looks like they're doing it all over again in the code!
Chris at 17 Feb 2007, 8:50pm. Permalink
I'm not a nutbag and this is a perfectly legit way of using CSS. Instead of a supposedly meaningful classname, you can use classnames which state exactly what is happening. Use abstracted names where the class is used repeatedly, and this kind of thing in multiples where not.
The names are a little long though - I would abbreviate.
matt at 12 Mar 2007, 11:31am. Permalink
As a developer that worked on this site I can understand why you think this method is a bit strange but that is without understanding the reasoning behind it.
One of the priorities in developing The Times Online was low page weight.
The site has a modular structure and contains literally hundreds of different modules, many of which contain shared characteristics, such as paddings, widths or floats. To build classes specific to each module would have required several hundred classes, with massive repetition of instructions within them.
Instead we chose to create a set of re-usable "building blocks" for common and repeatable attributes. This does mean that many stylistic tweeks are done at HTML level rather than CSS, i.e. if I want to change the gap between an image and the following text in module x you might swap the class padding-bottom-10 for padding-bottom-5 rather than changing the class .module-x in the CSS but that's not as difficult or confusing as some people seem to think.
However, what you get in return is a huge and complex site such as Times Online powered by two CSS files with a combined size of just over 100k and not a table in sight.