Arizona Woman Grows World's Largest Style Sheet

July 26, 2005

I'm pretty sure I'm writing the longest style sheet in the history of humankind. I'm thinking of submitting it to the Guinness people. Maybe grab myself a slice of fame while I'm still around and kicking. To give you an idea of its size, I'm considering adding a search feature to it.

I didn't set out to write the biggest style sheet in history. It just sort of happened on its own. Despite my better judgment (and the sage advice of a number of readers of this blog), I decided to go back and recode an old site in web standards (or my approximation of them). This isn't as stupid as it sounds. It's my pro bono/mitzvah site and I actually still maintain it, so it made sense to rework it.

At the time, it also made sense to me to use one style sheet. The whole site uses the same design--same header, same side bar, same footer. Plus, I rather cunningly told myself, I'd be able to reuse style rules from one section on other sections and save a bundle on bandwidth.

But this isn't a small site. It covers a lot of ground. For instance, it has two cgi-driven sections: one an Internet directory, another an online cookbook. As you can imagine, the contents of these two sections have significantly different style needs--as do the calendar and the fundraising slideshow, the online newsletter and the regular articles, the baby name finder and the kids' crafts section.

I'm almost done with the redesign, and my style sheet weighs in at a hefty 34 pages (in Word). I don't have meek little headers like \* Lists *\ in my sheet. Oh, no. Not this woman. I have chapter heads.

  • Chapter 23 - Lists with Bullets
  • Chapter 24 - Lists without Bullets
  • Chapter 25 - List with Bullets Replaced by Graphics
  • Chapter 26 - Lists without Bullets with Backgrounds and/or Borders
  • Chapter 27 - Lists without Bullets That Really Aren't Lists At All But Really:
  • Chapter 27 Part I - Inline images
  • Chapter 27 Part II - Forms
  • Chapter 27, Part III - Addresses...

Well, you get the idea.

How much of this style sheet is redundant? I'd hazard a guess at 33%. I mean, really--at this size, who knows what the hell is in there? Top Style will combine rules that are exactly the same. But that leaves a lot of nonsense like:

.advsearch input.text {
background: #f9fafb;
border: 1px solid #9ca6b0;
color: #000;
font: 11px/180% helvetica, arial, sans-serif;
width: 180px;
margin: 0;
padding: 1px 0 3px 3px;
vertical-align: middle;
}

.advsearch input.text {
background: #f9fafb;
border: 1px solid #9ca6b0;
color: #000;
font: 11px/180% helvetica, arial, sans-serif;
width: 120px;
margin: 0;
padding: 1px 0 3px 3px;
vertical-align: middle;
}

Even if I took out the redundancies, I still think I'd have a shot at the world record, don't you?

Now, I know there are going to be a lot of kind souls out there who are going to rationally suggest that I split up this style sheet into more manageable parts. You know, just separate the style rules into the sections in which they're used and call up the sheet on just that section. Very wise, indeed.

And just for you people, I will gladly post the entire 34 pages so you can get to work on it right away. If you can figure out which style rules affect which pages and which don't affect which, which might affect them anyway because of inheritance, which I'm hopeless with, then I salute you.

For now, the site is running with a 34-page style sheet, in all its redundant glory. And as for me... I'm going to go and take a long, much-earned nap before the Guinness people show up.