Main content begins here

Say "No" To Multiple Style Sheets

Tuesday, March 17, 2009

UPDATE: January 31, 2010... This article makes reference to the fact I previously needed to use additional style sheets to target certain browsers such as Safari or IE6. I no longer use even these additional style sheets. Instead I use the CSS Browser Selector javascript that allows me to target browsers inside my single CSS stylesheet.

So, I've had enough of the multiple style sheet thing. Actually, I had enough of it when I first heard of it, years ago when it was touted as "the right way" to go about setting up CSS. The premise is this: use one style sheet to set all elements of a browser back to ground zero, often called a "reset" style sheet; use one style sheet for fonts; use one style sheet for colors; use one for other stuff like layout.

Wow, what a pain in the ass. And I mean that from a couple viewpoints -- from having to set it up, to having to maintain it as the original coder, to having to update it as the non-original coder.

When it comes to CSS I do try to do things "the right way" because I realize in the long run some extra work or setup, etc, pays off later. For example a web site doesn't have to be "valid HTML" to run just fine in browsers. Even cross-browser sites don't necessarily "need" to be valid. We do it because it helps down the line in other ways, and because we care about doing things well as an HTML professional.

But this whole multiple style sheet issue is ridiculous. I've worked on projects where "lead" coders have demanded I work a certain way, which I honor because I've accepted the role as subordinate and its therefore a request of my client. I've seen articles from highly respected sites in the industry about multiple style sheets. But I just don't buy it.

Why So Cranky About Multiple Style Sheets?

My reasons are pretty simple. I've been on the side of the person creating those style sheets, and I've been the person who had to edit those style sheets created by others (and even created by me), and I can't possibly fathom how all those style sheets add up to a savings in time. I see strong production value and savings in time and money in using as few style sheets as possible because very simply, it is easier to track down a style to make a change if its all in one style (or as much as possible in one sheet). Multiple style sheets means knowing or searching multiple files for what might be the style you're looking to update. Big waste of time.
I've heard some of the arguments and I just can't agree. It hasn't proven to be a production value to me.

There are times when I HAVE to use separate sheets because I know of no other way to acheive certain goals, such as targeting Safari. In those cases I do have to have separate style sheets.

For your info, although the Way Cool Web Design site does NOT support IE6, you can target certain version of IE by using IE conditional comment like this:
<!--[if IE 6]> <link href="ie6.css" rel="stylesheet" type="text/css" /> <![endif]-->

You can also target Safari by using a malformed style sheet call:
<link type="text/nonsense" rel="stylesheet" href="safari.css" media="all">

The above situations are the some of the only times I use multiple style sheets. So, are you buying into the hype of using multiple style sheets?

I'm very impressed with your web designs and tableless CSS skills... You completed the work very quickly, and it was correct the first time. You are also a good communicator, which always helps.
James B., Owner Bishop Konig Advertising
Copyright ©2001-2018 Way Cool Web Design LLC. All Rights Reserved.