Jump to content

Cre8asiteforums Internet Marketing
and Conversion Web Design


Photo

multiple css files


  • Please log in to reply
22 replies to this topic

#1 cpdohman

cpdohman

    Ready To Fly Member

  • Members
  • 23 posts

Posted 16 May 2006 - 12:48 PM

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.


#2 eron19

eron19

    Light Speed Member

  • Members
  • 582 posts

Posted 16 May 2006 - 01:13 PM

1

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


#3 FP_Guy

FP_Guy

    Mach 1 Member

  • 250 Posts Club
  • 413 posts

Posted 16 May 2006 - 01:14 PM

1

#4 fisicx

fisicx

    Sonic Boom Member

  • Hall Of Fame
  • 1884 posts

Posted 16 May 2006 - 01:39 PM

1 for screen

1 for print

1 for handheld

#5 Adrian

Adrian

    Honored One Who Served Moderator Alumni

  • Invited Users For Labs
  • 5779 posts

Posted 16 May 2006 - 02:05 PM

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 :)

#6 TheManBehindTheCurtain

TheManBehindTheCurtain

    Time Traveler Member

  • 1000 Post Club
  • 1035 posts

Posted 16 May 2006 - 03:32 PM

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.

#7 ewo_2006

ewo_2006

    Whirl Wind Member

  • Banned
  • 54 posts

Posted 16 May 2006 - 03:51 PM

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

#8 Guest_joedolson_*

Guest_joedolson_*
  • Guests

Posted 16 May 2006 - 04:59 PM

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...

#9 Black_Knight

Black_Knight

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 9339 posts

Posted 16 May 2006 - 05:04 PM

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.

#10 ger_seo

ger_seo

    Ready To Fly Member

  • Members
  • 12 posts

Posted 17 May 2006 - 01:40 AM

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.

#11 rmccarley

rmccarley

    Light Speed Member

  • Members
  • 642 posts

Posted 17 May 2006 - 03:19 AM

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.

#12 bwelford

bwelford

    Peacekeeper Administrator

  • Site Administrators
  • 9011 posts

Posted 17 May 2006 - 04:32 AM

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.

#13 fisicx

fisicx

    Sonic Boom Member

  • Hall Of Fame
  • 1884 posts

Posted 17 May 2006 - 05:52 AM

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.

#14 Wit

Wit

    Sonic Boom Member

  • 1000 Post Club
  • 1599 posts

Posted 17 May 2006 - 11:58 AM

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/

#15 Guest_joedolson_*

Guest_joedolson_*
  • Guests

Posted 17 May 2006 - 12:32 PM

Off Topic offtopic

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.


#16 Wit

Wit

    Sonic Boom Member

  • 1000 Post Club
  • 1599 posts

Posted 22 May 2006 - 01:45 PM

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.

#17 Guest_joedolson_*

Guest_joedolson_*
  • Guests

Posted 22 May 2006 - 02:07 PM

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

#18 paranoidandroid

paranoidandroid

    Light Speed Member

  • Members
  • 821 posts

Posted 23 May 2006 - 03:53 PM

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.

#19 Mano70

Mano70

    Mach 1 Member

  • Members
  • 256 posts

Posted 23 May 2006 - 04:28 PM

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.

#20 Ruud

Ruud

    Hall of Fame

  • Hall Of Fame
  • 4887 posts

Posted 23 May 2006 - 05:16 PM

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.

#21 Tangaroa

Tangaroa

    Light Speed Member

  • Members
  • 513 posts

Posted 24 May 2006 - 03:08 AM

Depend on the needs of the site. Usually I use only one css file for the complete site.

However the idea of using different files for different needs sound appealing to me.
e.g. using one file for positioning and fonts and another for the rest. I guess on the other hand it will be harder to maintain the files.

Edited by Tangaroa, 24 May 2006 - 03:08 AM.


#22 Black_Knight

Black_Knight

    Honored One Who Served Moderator Alumni

  • Hall Of Fame
  • 9339 posts

Posted 24 May 2006 - 06:47 AM

I find it easier to maintain the files when separate to be honest. There's a lot less items in each file to scan through for a start. And I know what is where right away.

#23 A.N.Onym

A.N.Onym

    Honored One Who Served Moderator Alumni

  • Invited Users For Labs
  • 4003 posts

Posted 24 May 2006 - 07:14 AM

I'd say it depends on the size of a CSS file.
If it is under 3kb, I shouldn't worry separating the content.
If it grows beyond 20kb, then splitting them in a semantically correct way will be helpful.



RSS Feed

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users