22 replies to this topic

[cpdohman]

i've been seeing sites that have more than one css file. my guess is they are doing this because it helps keep things organized. so far i have been using one css file but they do get kind of big and less than smooth for finding what i am looking for.

how many css files do you use for a site? if you use multiple files, why do you use them and how do you break it down or categorize them?

thanks,
chris

Edited by cpdohman, 16 May 2006 - 12:55 PM.

[eron19]

1

Edited by eron19, 16 May 2006 - 01:13 PM.

[FP_Guy]

1

[fisicx]

1 for screen

1 for print

1 for handheld

[Adrian]

Usually one, though a project a few months ago had one with the navigation styles seperated out, as they were pretty extensive.

I've thought about breaking things down a bit too, getting to the point where a 12kb style sheet isn't uncommon, and is probably on the small side.

Navigation would be one obvious thing that could be seperated out if I did split them.
I'd probably have one stylesheet for stuff used cross site, so the standard header, navigation, footer type stuff. then another for stuff used extensively, but not everywhere, and maybe another for thign that only appear in say one section.

If I had a system that could be told only to link stylesheets for a particular section, I might make use of that.

With broadband becoming a lot more popular now, and the way CSS is cached, it probably doesn't make a great deal of difference except for management of styles.

Argueably, it could become as confusing to try and remember which file something is defined in

[TheManBehindTheCurtain]

1 + 1 = 3

I run two sites off the same template engine. Foundation styles common to both sites go in one CSS file. Styles specific to each site go in another CSS file. So each site use two CSS files, and there are three total to manage -- one common one, and two specific to each of the sites.

I believe many sites using multiple CSS files do so when their site is componentized. When you're doing CSS-based layout, the number of styles can really proliferate. Even if bandwidth isn't an issue (they're still just text and shoot down the pipe easily), management is; some just become too unwieldy (as opposed to the ones that are "wieldy" I suppose?). Anyway ... if you've developed a heavily designed forum or download site or shopping cart or any section of a site that's a component of the larger whole, it can be easier to maintain the component-specific styles in a separate CSS file.

From a QA perspective, segregating styles that aren't used within a section of a site also has some testing implications. Debugging conflicting or inheriting styles can be much easier.

As fisicx points out, functional styles are also good candidates for breaking out.

[ewo_2006]

For reasons I can't fathom, a particular site that I admire has one, 'top tier', style sheet, basic.css

That sheet simply includes the following code:

@import url("positioning.css");
@import url("typography.css");
@import url("colour.css");
/*\*//*/
  @import "ie5mac.css";
/**/

The end result is all terribly impressive but I think it would drive me nuts

[joedolson]

Varies. Usually, I'll have one main style and may provide alternate styles. I also sometimes provide separate style sheets for handheld devices when necessary, and frequently provide print style sheets. My main style sheet however is usually contained in just one file, minus any hacks I find myself needing to use which will be segregated off in the cursed "IE-only.css" file.

So...I guess I almost never ACTUALLY have only one stylesheet present, actually

I've toyed with the idea of segregating styles by type, like ewo_2006 mentions below, but have always found it to be a bit of a pain. I don't see any real benefit over having the files in one sheet with clear comments to separate sections...

[Black_Knight]

I've just recently begun using several stylesheets for a single site.

One of them sets fonts and margins and padding to a 'safe' cross browser norm from which I can then later use percentages and Ems to adjust things while keeping them looking much the same in all popular browsers.

One of them is devoted purely to the layout aspects of CSS - positioning, spacing, padding and margins - of the 'blocks' of the site. It is kind of the scaffolding and structure of elements, rather than colours, fonts, etc.

A third stylesheet is dealing with the borders, fonts and colours and 'pure style' aspects of my CSS.

I'm finding it just a bit more organised to split them by function, and am liking it.

[ger_seo]

I usually use 2 or three. Pends a bit on the website.

The first one is for the main lay-out of the website. Logo's, navigation, slogan and more of that stuff. The second is for the actual text on the website.

I like it this way as it keeps the stylesheets organized and helps me if I need to change any part in the CSS.

[rmccarley]

Usually 1, but...

Extensive hacks will bring in a second one for IE. Or on sites that require a print one. I have a new site that has several styles. And I think they are broken down the way BK described - by function. It's a template so I'm not sure... yet.

[bwelford]

I have two, screen and print.

However I think it makes a great deal of sense to break out by function. I particularly liked the idea of trying to get all the IE hacks in a separate file. However I'm wondering whether that's always possible given the order in which you have to get to some of these hack parts versus what the standards compatible browsers are seeing.

[fisicx]

Whilst I can see the advantages in breaking out your style sheets to contain different aspects of the site design, it can make site maintenance tiresome.

I tend to start off with my style sheet in the header - makes for a quick fix as I am building. I can then export the whole lot into a single file.

If you want to break out the style sheets, then you need to be thinking about what bit goes where. Does the left float style need the background colour? Should my nav bar padding belong with the link style?

However I do like the idea of seperate style sheets, having a set of 'template' styles means one doesn't heve to go through the cut and paste exercise of existing style sheets when beginning a new project.

Needs investigating methinks... I'll just add to the list of things to do. Book 2. Volume 3.

[Wit]

I use two (=2) on one of my sites to experiment with different fonts and colours. Both are ugly though, and equally usable, so that doesn't count.

But on my main site, I've added a second style sheet as well. I made it especially for 50% of my known visitors who were still using MSIE4 and 800x600 screens.

I used the "change font size" button ('persistent' change, using a cookie) as shown on http://www.alistapar...cles/alternate/

[joedolson]

Off Topic

But on my main site, I've added a second style sheet as well. I made it especially for 50% of my known visitors who were still using MSIE4 and 800x600 screens.

50% of known visitors using MSIE4 / 800x600? What kind of site is this? This is recent? I'm just kind of surprised! The issue of supporting MSIE4 came up not too long ago on Accessify Forums and I suggested that support for IE 4 was pretty unnecessary, on the basis of the statistics I'd seen - but I'd be very curious about what kind of site might be attracting any kind of IE4 market.

[Wit]

It's just that my sports club has a lot of pensioners for members - who got their pc from their old employer and have never updated since... That said: some of them have broadband now.

[joedolson]

Knowing that, I start to be able to see where you're coming from with your posts on the font-size thread...

[paranoidandroid]

On my personal site (see sig) I used 2 stylesheets so I could have an alternative design on a style switcher.

On a couple of sites I did for clients I used 2 stylesheets so the font size could be changed using buttons on the sites.

[Mano70]

3.

One main, one print and one for IE. Started with the extra one for IE since IE7 now is coming to town. MS recommends the extra CSS-file for older versions of IE, but on two different websites I found it more handy to have a separate style sheet for IE7.

[Ruud]

Usually one. If the design calls for meeting IE in the middle I like to add a second one which gets (also) loaded only for IE.

Once things change, and with IE7 we again see that this does tend to happen, it is nice to have all the special steps you took for IE in one place.