/    Sign up×
Community /Pin to ProfileBookmark

How many stylesheets should a website have?

Copy linkTweet thisAlerts:
May 19.2006

I know this might seem a bit of a strange question but I wondered what other people do. Do you have one global stylesheet for the whole website plus another unique one for each html page that covers the unique elements on that page or do you stuff it all in one global stylesheet even if parts of that styleshhet wont be used for the current page? Or do you put your unique CSS in the <head> section of each html document.

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@GarySMay 19.2006 — Most of the time I use one stylesheet for everything... but the drawback is that I end up with a lot of stuff that applies to one page only.

I'm building a site at the moment where page weight is an issue, so I'm checking pages with http://www.websiteoptimization.com and getting messages like:

[B]Warning! The total size of your external CSS is 17511 bytes, which is over 8K. Consider optimizing your CSS for size by eliminating whitespace, using shorthand notation, and combining multiple CSS files where appropriate.[/B]

(Wow - is 17 KB a new World Record?)

So... the new site will have one global css file, plus page-specific css for those pages that need it.

Which brings me to the excellent point that you raise: the relative merits of a [b]page-specific css file[/b] versus [b]page-specific css in the head of the page[/b].

Must say that I've tended to do the former - mainly because when dynamically generating a page it's easiest to build in some css (into the HEAD) at the same time. But I also see that sticking the css into a file would have some advantages (and now I think about it, just as easy to generate in):
[list]
  • [*]caching (only an advantage if the css applies to more than one page)

  • [*]hiding the css from old browsers (if using @import)

  • [*]improved content/presentation separation (?) ... and less for the search engines to wade through before they get to the "meat"

    • [/list]

    On the other hand, is it really worthwhile to add another object to the page (another http request) for what might be a css one-liner?


    Thanks for making me think about this - interesting one!
    Copy linkTweet thisAlerts:
    @Reli4ntMay 20.2006 — It really depends on the content of the site sometimes I use one stylesheet and then a second depending on the predefined group the page falls into. For example, one of the groups might be trailers with the legal stuff on it, an forum could catch another one, the pages of a cms could be yet another, etc. This way you have access to common styles on all pages and you don't have to fiddle with too many sheets and any repitition.
    Copy linkTweet thisAlerts:
    @KeveyMay 20.2006 — I jam everything into one style sheet...it's only about 8k so figured it wouldn't make a difference if I broke it up amongst different pages, esp since it caches.
    Copy linkTweet thisAlerts:
    @SnitchcatMay 20.2006 — IMO, it depends on the site.

    Generally, I use one overall stylesheet. Any page or sub-section that truly requires a different style, gets a stylesheet of its own.
    Copy linkTweet thisAlerts:
    @Ness_du_FratMay 20.2006 — I use one general stylesheet for the overall layout, and then, one stylesheet for each section (they are quite different, so I prefer to use separated stylesheets not to mess up with everything).

    I used up to 3 stylesheets per page, but it was for a specific case which required that. Generally, 2 is good. If your layout is not extremely complicated, one should do the trick.
    Copy linkTweet thisAlerts:
    @RaremandanMay 20.2006 — I honestly think that there is no correct or incorrect amount of Stylesheets on one site. If you have a basically simple web template the one stylesheet for it will probably be enough, yet if there is a huge complicated template then perhaps two or three but you can use as many as you want.
    ×

    Success!

    Help @bokeh spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.18,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...