I have it on good authority that unused CSS is bad, which leads me to believe that putting the CSS for every page in one giant file is also bad.
…But then I get thinking about server requests, and all that good stuff. Is it worth the performance hit if the CSS for every page is cached when the visitor first comes to the site? I’ve heard that CSS is pretty fast as it is, and so not worth the effort.
Any words of wisdom? Another thread, maybe, that already goes into this?
I like this question.
I’ve read of some nifty things to do with conditional CSS
and those examples were chunked…
Either way its a bi’yatch chunk’n yur CSS
Stephen, can I ask you to resubmit this last question in a separate thread? In future, when SP visitors hunt for information on multilevel menus, they might not think to check a thread about master CSS stylesheets.
I prefer one style sheet, and the way I find my way around it is to keep Firebug open (in Firefox), and that immediately tells me what line to find a style declaration on, so that I can head straight to it.
Ah yes, that’s a good one too—whether working in a browser or editor.
I always choose one large stylesheets over several small ones.
You need to take into consideration that a browser generally will not have more than 4 connections open to any one server at the same time. So if you have eight stylesheets for example, the browser will start downloading the first four, and put the rest in it’s download queue. Only when one of the stylesheets is download it will start downloading the next one.
If you only have one stylesheet, the browser can already start downloading other stuff, like javascript files, when that stylesheet is being downloaded, giving the website as a whole a faster experience (less waiting time).
will you any one explain how to create a multilevel menu using pure css not with javascript combined. so that the pull down menu work in all browsers. Moreover the pull down menu should display menu items over texts with divs.
stephen
What I do is the following:
I have one ‘layout.css’, that contains the style for all base layout elements, then I’ll have ‘videos.css’ for say, the videos page. Each page that has it’s own elements gets it’s own stylesheet, each page will never have more than 2 (or 3 sometimes) stylesheets included.
What I feel are the advantages of this:
If you have large sites with over 50 pages, it won’t load the CSS of elements found on pages you’re not currently on (or more importantly may never visit)
It keeps your CSS maintainable, you’ll never have to locate certain classes in a 10,000 lines ‘main.css’ file. You’ll know where to look!
You’re more free to recycle ID and classnames that may occur on different pages in different contexts, as they’re not all in ‘main.css’ but in their neatly organized own CSS files.
This is how I like to do it 
Hope this helps
If I’m reading your question correctly, since the alternative is either to have the browser download and then cache a number of different stylesheets (no faster), or to use the @import property (slower), I see no advantage in using different stylesheets for your layout, color schemes, links, etc. But I’m sure people will disagree.
Me, I use ctrl-f and find the element in question. One stylesheet is so much easier for development.
Chris, while the Google page does have some good information (it is true that selectors like * are indeed inefficient, and it is also true that the more tags you list with descendant selectors, the more passes through the DOM the browser goes through, because the browser actually is reading them from right to left), it doesn’t recommend you make page-specific styles or a separate sheet for each page.
The google page also recommends against things like
ul#foo {
}
for performance reasons, and this is also correct (first the browser finds #foo, then travels up the DOM to check that #foo is an attribute of a ul). However there are times where either you use something like that to make something more clear or obvious to another developer (or yourself in the future), or I’ve used them rarely to get that extra bit of specificity for IE6. The performance hit assuming it’s not overdone shouldn’t even be measurable.
I would throw in one caveat. I favor one stylesheet over multiple stylesheets for exactly the reasons that ScallioXTX cites. The browser actually waits and doesn’t download other things. So I do it for performance reasons… in production.
In development, trying to sort through your style rules is a pain. I absolutely separate things out into multiple stylesheets by topic (structure vs. style, etc.) when they start to become unmanageable.
I used to do ctrl+f as well, but found NetBeans has a very neat feature for locating class declarations.
If I have the following
<div class="some_class">some text</div>
I can just crtl+click “some_class” and it opens the appropriate CSS on the line that class is declared. Other editors have this functionality as well I believe.
PS. It’s new to NB6.9, NB6.8 didn’t have this functionality
PPS. If some_class is declared in multiple CSS files you get a drop-down with all stylesheets it’s declared in when you ctrl+click “some_class”, so you can pick the one you want
Stephen, you asked me in an e-mail (which I couldn’t reply to, as you have access blocked) which forum to post your menu question in. You can post it in this forum.