CSS

madcat: you could add an inline style to the tag

papabaer: A general rule of thumb is that you should always try to place your styles where they can provide the widest level of application (external style sheets). But it is also VERY important to recall the phrase CASCADING STYLES.

When I first started using css, I wanted absolutely everything external. I was thrilled (and I still am) at the clean HTML and low file size. I had an ideal, you know?

On a larger site (3,000 pages) that ideal meant one stylesheet for each of the 5 directories. I figured "It gets cached after the first download, so file size won't matter much."

And those stylesheets just grew and grew, and became challenging to maintain on this active site. This was especially true because there is a team involved, it's not just me..

We've started to evolve some rules of thumb:

1. Specific style used just once on one page
-- declare the new style inline.

2. Style used twice on one page
-- move it to the head.

3. More than two unique styles for a page
-- create an additional external sheet which cascades in at the head.

4. More than four pages using an additional stylesheet
-- add those declarations to the principal stylesheet.

I'm wondering how this compares to others' experiences. Do you have rules about where to put styles in the cascade? How many total pages do you find can use the same css file before things get unwieldy?

I've not worked on such a large project before but your rules certainly make sense.

I tend to (on larger projects) have one sheet for positioning and basic styling and then add further sheets per section if things will change.

I recently did one for a company doing fire and environmental stuff and have a main sheet with blue rollovers etc, import one for the environmental section that overides that with green and the same drill but with red for the fire section.

I tend never to add styles in the head but name extra sheets carefully. For example I almost always style forms (clients love it and it's very easy) so I usually have an extra sheet just for that as there's little point carrying it around the whole site if it's just used on one or two pages.

Much of it's down to common sense and good naming schemes. Having said that, My own biz sites sheet is a mess and I know exactly what you mean by 'getting out of hand'!

Nick

<edit>Speeling</edit>

[edited by: Nick_W at 9:17 am (utc) on April 1, 2003]

I will have one style sheet that may serve many pages, perhaps even the entire site, that provides styles for the various core elements: <p>, <ul>, <h1>, etc. and then a very simple "page specific" style sheet that applies the positioning instructions and unique background images.

If I have a page that can use the exact same layout but only varies in background-images, then that goes into the HEAD, and maybe even inline.

I will often place these small, custom stylesheets in the same directory as the pages they are associated with; all are very small files. In fact, most of my style sheets are around 1kb in size.

Site-wide, there might be a global.css style sheet that addresses fonts, headings, etc. - in fact, I might even use a global style sheet for a specific DIRECTORY. In all cases, the flexibility of the CASCADE, will allow you to tweak your style sheets as needed.

You can move styles here and there to suit your needs and increase efficiency. After all... isn't that the very purpose of CSS? Seperation of presentation from content RULES! ;)

1. One file named elements.css, global for the entire site, that defines the styling of the basic html elements.
   
2. One file named style.css, global for the entire site, that defines classes and ids that are used throughout the entire site.
   
3. A file local.css, one for each section, that defines classes and ids that are used only in that section.
   
4. The rare inline and head declarations for those really unique circumstances.

About good naming conventions - I've read several authors who caution against class such as .blue or .small, since you may want to change that particular kind of empahasis to another rendering in the future. But I find when working with a team of page builders, that .blue is exactly the description they crave. Without it, they tend to create extra classes and overlook existing ones.

What do others think? Should class and ID names always be functional or can they also be visually descriptive?

[edited by: tedster at 5:44 pm (utc) on July 20, 2002]

I'm using 8 external style sheets:

I remember that but couldnt find the original. I agree that it's nicer than the @import hack except for the fact that I don't think you can get it to validate. In effect, doesn't this nest a <link> tag inside a <script> tag (<link> tags can only be contained within <head>), which is invalid?.

Tom

Anyway, let's assume that the code is:

<script type="text/javascript">
if(document.layers){
document.write('<link rel="stylesheet" type="text/css" href="nn4.css">')
}
</script>

Doesn't this evaluate to:

<script type="text/javascript">
<link rel="stylesheet" type="text/css" href="nn4.css">
</script>

Or does it simply evaluate to:

<link rel="stylesheet" type="text/css" href="nn4.css">

If that's true, then the W3C validator is not parsing it correctly?

Tom

There are two things you can do:

1. Use an external JavaScript; or
2. If possible, escape the offending characters.

I think it's only the < that's causing the problems, and because it's inside a literal string, it's no problem to fix: simply use the JavaScript escape \074 (you can't use &lt; because it contains an ampersand).

document.write('\074link rel="stylesheet" ...

Great! It validates perfectly by escaping the <

I wanted to avoid the external JS because with Tedster's solution it doesn't even do a file read unless the file is needed. I could get it to validate simply using JS styles as in

if (document.layers){
with(classes.header.div){
backgroundImage = "url(ugly.gif)"
backgroundRepeat = "repeat"
color = "Silver"
}
}

which is fairly light, validates and obviates the need for another disk access, but it seems rather ugly ... plus I get confused with JS styles having to remove - and capitalize and all that.

Cheers,

Tom

I have yet to work on projects that require a complex set of CSS style sheets and formulations. When I do however, I know that this thread is coming with me.

Based on some aforementioned examples- say you have five directories on the site -it would be wise to create a css/ folder for each directory. Create 'superglobal' sheets for elements that are consistent across the entire site. Any individual elements like forms or lists can have their own sheet, but sorted relative to the directory they fall under.

papabaer describes some great ways to orgainize your style sheets in the link above.