January 02, 2004 | View Comments (25) | Category: Web Mastering
Summary: Do you prefer to use a single stylesheet or multiple ones?
I have come across a few stylesheets lately where the designers separated different parts of the websites into different stylesheets. I can see the benefit in this for easy updates possibly, but why wouldn't a single file do just as well as long as it is properly commented? Another issue I always wondered about was if the increase in stylesheets led to a dramatic increase in the amount of hits a site experiences.
I have yet to use the multiple stylesheet tactic, but there has been more than one occassion where I have thought about how useful it would be. What I do like to do with my stylesheets is keep all the basic HTML elements at the top and then just go down in order of the <div>'s on the page. If I do a decent job of commenting each section then navigating the stylesheet for editing does not become a problem at all.
Multiple stylesheets could possibly help in fighting redundancy in my files, which is a problem that I sometimes have. This occurs when I have more than one id or class that uses the same properties. In this case it would be best to use one class for all elements that wish to have access to those properties.
For those who do use multiple stylesheets, what do you see the benefits as?
Trackback URL: http://9rules.com/cgi-bin/mt/mt-tb.cgi/92
I use @import "/css/main.css";
at begining of each sheet specific to part of site/page.
-It helps to see what is the main style.
There are no namespace conflicts (as you mentioned).
-I can use refactoring skills as for other code.
- Cashing on the client side helps a bit.
- I read paths not hits in the logs.
Smejmoon (http://smejmoon.lv)
As with most of these topics -- it depends for me.
Sometimes it's really beneficial to use multiple style sheets. For example, down on our hospital intranet, I use one stylesheet for most everything using a similar method as you.
Then I use another stylesheet that sets colors and images for all the different sections based on the body class of a page.
This was the least complicated way for this project.
On others I just use one stylesheet because that is the least complex way of doing it.
Keith (http://www.7nights.com/asterisk/)
I usually have the styles as a seperate PHP file, but rather than using @import or whatever. It makes the files a little bigger, true, but eliminates problems with things like corrupt stylesheet downloads or other connection issues which can cause the page to either display poorly or jump straight to a 404 (NN bug). Plus you can switch styles based on cookies and so on, or browsers or any other variables available to the system. Easier than maintaining multiple files just to set a preferred font size or color.
JC (http://www.thelionsweb.com/weblog)
hmm. Some of that got deleted.
It should have read...
"but rather than using @import or whatever, I include it directly into the output page -- require_once('styles.php');"
JC (http://www.thelionsweb.com/weblog)
I use multiple stylesheets on Digital Web Magazine because they allowed me to "drag and drop" articles. For example, I could have an article go through the editorial process and end up being labled as a column for XYZ author's column, but then discover that XYZ author doesn't want the article to be a column, they want it to be a Feature. Using a sperate CSS file for each "section" of the site allows me to take that file and move it into another folder and all of the UI and such automatically changes from the origional style to the new style with no effort involved.
Of course, since then the site has changed and this doesn't hold true today, it requires a few small tweaks now... but in theory I could go back to my CSS and add in the changes and allow the CSS to work as it did before when I move files around.
I think the biggest benefit was that I could have one section red, and with a red logo graphic and red links, etc and another section blue, blue logo graphic, blue links, etc without having to make any changes to the markup for either section.
Using one CSS file would require me to some how identify each page by the section it is suppose to be associated with (i.e. body with id="section" or something to that effect). The site uses SSIs in much the same way as it does CSS files.
Each section has their own logo, SSI file set, and CSS file. There is also a global CSS file for general "sructure" elements, etc. The global CSS file is linked absolute, the local CSS file is linked relative to the file's location. The SSIs work the same way in the regaurd as well.
Nick (http://www.digital-web.com)
I also first style html tags then classes/IDs.
It may be useful to separate styles by version. One file for CCS1 capable browsers and another for CSS2 browsers. Don't know why we could do that, maybe for "graceful degradation" purpose...
mauriz (http://www.svay.com)
I think that using different style sheets for different site sections is a good idea simply because of the size that style sheets get when you are working on a large site. Not only does it make workflow easier, but it helps with bandwidth issues (why should someone visiting the home page of a site download all the specific style rules for the shopping cart section - etc.).
Another topic of interest is why more people don't give their stye sheets "title" attributes. Even if you're going to use the @import trick you can do that from a dummy css file. Mozilla currently has a default style switcher built in that will let you toggle through the different style sheets as long as they have title attributes. Any comments?
joe
I only use multiple stylesheets to allow for user customization of how my site looks. All of my styles are in my main file, except for the text sizes. I then have three additional stylesheets (small, medium, and large) which contain the font sizes for the respective setting. Based ona cookie, I load the proper additional style sheet so that the text size is set to the user's preference.
When I set this up, I tried using the PHP approach that JC mentioned above, but I had a lot of problems with that in Mozilla (I recall JC trying to help me through it, and neither of us could really get it working in Mozilla on my site, sadly).
milbertus (http://www.milbertus.com)
Actually, Milbertus, I'm referring to a different thing. I wish the one we tried had worked, though. Mine works fine because it's a php include inside php -- you were trying to do a dynamic external CSS file from a perl-generated page. If you look at the source code for a page I did this on, it's just the straight CSS embedded in the page. What we were trying on yours was like... @import "/foo.php";
Which should have worked, but Mozilla refused to accept something that the server types as php as a CSS file. BTW, I found a workaround for it -- just include this in the PHP file and it should work in Moz: header('Content-type: text/css');
JC (http://www.thelionsweb.com/weblog)
I've used multiple style sheets for Protection Plus for one of the reasons Joe already mentioned above... bandwidth. I have global styles that are used throughout the site but there are other styles that are used in only certain areas (partner, shopping cart, administration, etc.). For example, most customers will never login to or even visit the partner section so why should I force them to download a CSS file they don't need?
Nick (http://www.pixel420.com)
I can see the advantages of multiple stylesheets — one for layout, the other for style (and possibly even more, as Jon said). I've never used them myself.
David House
Well then is there a case when I should use separate stylesheets due to size? I mean do I cut it off at 5k or just do it just to do it?
I mean the stylesheet for this site is not big at all and was just wondering if it would simply to tedious to separate a small file. Large sites though I could definitely see the benefit.
Scrivs (http://www.9rules.com/whitespace/)
I've used both ways but usually start off with one file and then when there is a need I break it apart into multiple stylesheets. It's worked ok for me but I also need more organization in this area.
I wonder, of those of you who use multiple stylesheets, how many take advantage of "cascading"? I mean I use multiple style sheets but I usually link them in head section of the page and not within other stylesheets. For those who have done it this way, what has the benifit been doing that way? Any real world examples? Just a thought.
Quasi
I've mostly stuck to single stylesheets if I could, though I admit that there reaches a point of irritation when I have to scroll down a long, long page of styles to find The One to edit (and I think I use pretty clear commenting, too -- call it my impatience).
The only reason I've had for breaking it up into multiple sylesheets, so far, was for a site that required a different color scheme for each of the major sections of the website. So I would have all the same style names on the html page (top, nav, header, whatever), but an extra stylesheet that would display a different color as was appropriate to the section. So, I would have a basic default stylesheet, and then an additional stylesheet for each of the five sections...
Alanna (http://www.virginmoistness.com)
A good reason might be download time for huge CSS files.
My guess is (haven't tested) is that the browser won't apply any of the formatting contained in the CSS file until it's completely downloaded and parsed. For users with slow connection and a web site with a 60KB CSS it'll take some time before anything is displayed.
In contrast (again, it's just a suggestion) if the styles for the different parts of the page, such as Header, Body and Footer are contained in separate files, then the page will appear as the chunks arrive and thus create the illusion of faster download.
I'd love to hear your thoughts.
Blagovest Dachev (http://www.dachev.com)
Of course the above applies only for the first visit to that hypothetic website. Next time the required files will be pulled from the cache. Didn’t someone say though, that this first visit is crucial?
Also, for example if the Body area can have many different incarnations, then we can have the main CSS file loaded instantly from the cache and the relevant body style swiftly downloaded from the server.
Blagovest Dachev (http://www.dachev.com)
60k... for a css file? even 5 k is too big. If your files are that big, maybe you should consider rethinking your design a bit... or at least try some stuff to compress the existing one
Maybe use a class instead of a hundred basically identical ids... use css shorthand... remove anything that's just duplicating something it's inheriting... any declarations that are just reiterating the defaults... if your 'good' comments make up a significant portion of the weight, strip them out of the production copy of the file.
And yeah, if some parts only apply to some pages, split those parts into seperate files... but if you're using that much css code, I think you might treating things on a much too individualized basis.
JC (http://www.thelionsweb.com/weblog)
Because my site is very small, all my styles are in one file. My theory is that the more files, the less organized. I can see the benefits if you have different sections with varying layouts, but my site pretty much stays the same all the way through.
If you comment everything cleanly (which I don't. Too lazy) then one stylesheet is fine.
Alex (http://pixul.net/)
@import or any other linking of style sheets can have a comparison drawn to SSI (or any other form of server side includes).
I have a small library of 20-odd PHP functions that I include at the top of nearly every PHP script. These are constantly added to and refined over the months and years, and are highly usefull. *Not* including these files on every script would result in hours of repetitive work.
Now that I've spent around 6 months working every day with CSS2, I'm finding a similar amount of repetition, to the point where I'm considering a split-up of CSS into sheets for basic rules which I'll use on nearly every project.
This will save on repetition, and allow me to refine my base rules (eg font-sizes, line-heights, forms, margins) which I seem to repeat a lot in *one place* (as with my PHP libraries), and all pages/sites can benefit from the changes.
My styles sheets for modest sites are getting up around 400 lines these days... I'm positive there's redundancy, which would be nioce to cut back on, but also, I feel users are downloading styles they'll never use.
For example, my basic message board has around 100 lines of styles... why should a user who will only visit the news page every few days download 100-odd lines of bloat that they never need. Makes sense to only link/import that style sheet when it's needed.
Sorry for the long post, but there's no reason why CSS can't be modularized and converted into useful libraries, like any other well-thought out piece of software.
Justin French
I've got one php-file in which I include my html-files. Along with including the php-file and importing one main css-file I (better: my script) always check for a css-file named the same as the html-file in which are stored the page-specific styles. As mentioned above: why should the user load all styles to his computer when he's only checking the news-page ?
Sebastian
One thing I always wondered about was why people import extra style sheets from within the main stylesheet? Correct me if I'm wrong, but if you link several stylesheets in the HTML head, they will all be requested by the client when the head is received. If you import them the client must request the HTML and parse the head, request the CSS file and parse the imports, and then request any imported CSS files. I'm guessing it might be fractionally faster to import stylesheets only in the page head if possible.
Traditionally people used two stylesheets because NN4 doesn't understand @import. You could put everything that killed NN4 in @import, but still let it get some basic styles.
I hadn't thought about breaking CSS down into sections for large sites (good idea). However for smaller sites I don't think there's anything to be gained from splitting a stylesheet into smaller chunks, as the total downloaded size will be the same and a single connection is faster than multiple ones. If you have a bloated stylesheet for a smaller site, consider rewriting it so properties that you've assigned multiple times are only declared once. Or getting a program that optimises CSS for you. I think StyleMaster does that:
http://www.westciv.com/style_master/
Interesting thread!
oli (http://oli.boblet.net/)
JC,
CSS file size can and WILL easily start growing well beyond 50KB in the future.
This page's CSS file is just over 9KB and it's a mere minimalist design. Imagine www.2advanced.com diced into small pieces (for the same reason - to speed download) and described in CSS. As standards-compliant code proliferates further in the real world and we start seeing more business and entertainment sites utilizing XHTML/CSS, files will inevitably start growing. Do you remember the days when 80KB HTML file with little or no actual content sounded ludicrous.
Not only that, but we will also enjoy the ease and speed of markup/CSS generation by all kinds of WYSIWYG editors. Apps from Photoshop and Dreamweaver to obscure free utils will crank-up standards-compliant and REDUNDANT code pushing the limits of file-size to the skies.
There is also another argument: CSS Abstraction. Dave Shea speaks about it here (http://www.mezzoblue.com/archives/2004/01/07/abstracting_/). It seems that the very ideal of CSS (content/presentation separation) may cause another, rather substantial file-size inflation.
I personally never wrote a CSS file larger then 5KB, but considering all of the above points, chances are, the day I'll sigh every time I think about the "blog days" is not too far away in future.
Blagovest Dachev (http://www.dachev.com)
Assuming there is another, real reason to split up your stylesheets, I understand there are download speed benefits to keeping them small.
from www.websiteoptimisation.com:
"Ideally each image should be less than 1160 bytes, to easily fit into one TCP-IP packet. Most browsers can send multiple requests, which can speed display of multiple images."
Presumably the same applies to CSS files, but taking it this far seems absurd. Such is the game of optimisation!
Adam Bramwell (http://www.octapod.org/adam)
Another reason for using more than one stylesheet is one that I encountered in my last job: we had a corporate-wide stylesheet, but our individual web apps sometimes needed other styles for unique functionality. It wouldn't make sense to add the styles to our copy of the corporate-wide stylesheet, since it would make it a pain to upgrade to the next version given to us.
Jennifer (http://jennifergrucza.com)
Keep track of comments to all entries with the Comments Feed
©2003-06 9rules, Inc. | Thoughts Feed | Notes Feed
Amazon Stores: Powertools | Jewelry | Books | Health | Landscaping | Kitchen | Movies
#1
I use multiple stylesheets, simply because one would be way too big. I have one for the very basic styles, into which I import (via @import) ones for positioning, typography, titles (all the image replacement stuff) and navigation (usually quite complex, so good to separate it).
I find it a real help to do it this way. Same as you - I list all DIVs in order of appearance, leaving plenty of comments, but it still needs a bit more organisation.
Jon Hicks (http://www.hicksdesign.co.uk/)