Crutchfield Redesign Part 2: Span Class = Bogus!
Hello again. If you missed Part 1 in this series go check it out, or if you’re utterly confused go read the introductory post about the Crutchfield redesign. Everyone ready to continue on? Great! Now it’s time to talk about what I have heard Jeffrey Zeldman refer to as “classitis”. I think the Crutchfield site may have been suffering from a more serious form of this virus, maybe “acute respitory inflammatory bowel classitis.” Or, being in an industry that is fond of it’s acronyms, ARIBC. It was bad, and no amount of antibiotics would help.
Crutchfield’s use of stylesheets was interesting, rather than any contextual selectors, there were an abundance of classes that had nothing to do with describing the content that they affected. If their names were not entirely arbitrary, like classes Panel1 through Panel8, they were named for the visual effect that they produced, such as RedText. Does something need to be red on the site? Just wrap a <span class="RedText"></span> around it and you’re done. Incidentally, we had the funny side effect on a skinned partner site that we maintain, the RedText style was rendered as grey on that site to match its branding.
TextTiny
On the off chance that a style was aptly named for it’s original use, such as Caption, it wasn’t long before Caption was used anywhere that text needed to be 11px tall and bold. The most common class that you would see in our html was TextTiny. It was all over the place. It was originally a percentage based size, so it was common to see two nested TextTiny's to create small text. Like so: <span class="TextTiny"><span class="TextTiny">this text sure is tiny!</span></span>. One of the first things that I did when I started digging into the 1000+ lines of code in the Crutchfield CSS file was to declare a default style for the body that would be equivalent to the effect that TextTiny produced. Then I alerted the IT and Web Design teams that they could begin stripping out any instances of TextTiny that they saw in any of their code. This alone accounted for a huge bandwidth savings.
Tables for Non-Tabular Data Contributes to Classitis
Here’s an interesting tidbit for you to chew on: the more you use ugly nested tables for the visual presentation of your site, the less effective your style declarations become. One of the reasons we had so many instances of TextTiny around was because it had to be re-declared for each new table cell that was opened. The table cells did not receive the styling from the previous TextTiny declaration, so it was declared again (and again, and again).
Lesson Learned: Contextual Selectors
Contextual selectors are totally dudical, and the sooner you learn that the better. It will make your life so much easier, your code so much leaner, and the spirit and harmony of the universe will prevail on a magical unicorn of love.