SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Guru Rebirth Studios's Avatar
    Join Date
    Mar 2003
    Posts
    621
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Stylesheet Architecture

    The last few projects I've worked on have been more complex than previous ones. As a result my stylesheet line counts have been increasing. Say 500+

    My pages are static and not all of them are obviously going to need every style. Some are site-wide, some page specific, etc. I don't want to go overboard in segmenting them (excessive external stylesheets), I wanted to see what people here recommend.

  2. #2
    SitePoint Enthusiast Bullfrog245's Avatar
    Join Date
    May 2007
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you have a different style for a single page, I would just place it in the <style type="text/css"> section of your <head> I would only make a separate external CSS file if you are using it on several pages.

  3. #3
    SitePoint Guru Rebirth Studios's Avatar
    Join Date
    Mar 2003
    Posts
    621
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So, the givens to my question are: one external master stylesheet and one print stylesheet. Sorry for not pointing that out.

    I could further break down the master sheet by placing the page specific styles in separate sheets and then call them on a page-by-page basis, but I'm wondering when that should be done? When you reach a certain line count, when your master sheet is a certain size, or just as a convention of doing things, I'm unsure.

  4. #4
    SitePoint Enthusiast Bullfrog245's Avatar
    Join Date
    May 2007
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For external files, try to keep them less than 1160 bytes so they fit within one higher-speed TCP-IP packet (or an approximate multiple thereof). Anything more than 8kb takes too long to load with a phone modem.

  5. #5
    SitePoint Zealot
    Join Date
    Feb 2005
    Location
    sittin here on the Group W bench
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think that, in theory, the stylesheet can't be too large, because it's only downloaded once and then held in cache. You probably couldn't make it so large that it would matter even if you tried. Just my opinion.

    But then again I could be wrong. How many KB does 500+ lines translate into?

  6. #6
    SitePoint Evangelist croatiankid's Avatar
    Join Date
    Mar 2007
    Location
    Zagreb, Croatia
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've recently started using commas to select multiple elements to decrease the file size very effectively.
    Hrvoje Markovic
    Croatiankid designs

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't care what the "accessibility experts" say in this situation, but if you have a lot of separate style rules for each major section of your site (I'm going to use www.classicbattletech.com as an example here) then there should be a separate stylesheet served to each separate section that is stored independently of the others. Keep the master stylesheet that can serve every page of the site, but have the section-specific styles (like the product listings and photo galleries on CBT) separate.

    That way you're only forcing downloads when they're required, which improves the illusion that the page is loading quickly, rather than forcing every single style for every single section of the site down the pipes at once.

    Especially if the site is graphicially intensive, like CBT.com is. (And yes, I know the person responsible for the site I cited as an example, and he is working on cleaning up the front-end code to make it friendlier to dialup users such as myself. As for the table, he has it in there for one reason - the people who maintain the site on a day-to-day basis are Microsoft Word addicts.)

  8. #8
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    What has having separate style sheets for different sections got to do with accessibility experts???

  9. #9
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've heard a few so called "experts' saying you HAVE to have a single stylesheet, and that if you use more than one, you're a "very bad bad person."

  10. #10
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Then I'd say they were talking total rubbish.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I often work on large sites (1000 page plus etc) and there is no way that one stylesheet could cater for the whole site or be useful in any way.

    Most large sites have certain sections that are similar and you should set up stylesheets based on sections in order to keep them a reasonable size and manageable.

    If the header, footer, navigation is the same on all pages then you would have one main stylesheet common to all pages. Then in the different sections you would just call in the extra css for that section.

    When you have a large site no user is going to navigate all 10,000 pages in one sitting so it there is little use in letting them sit there while a 100k stylesheet loads.

    Of course you must have a logical and sensible approach to this to make sure your files are manageable. I quite often work on sites with 10,20 or even 30 stylesheets. However I make sure that at any one time there are only 3 or 4 linked to the page that's loading. If you are linking to 10 stylesheets then that is no better than just having the one in the first place.

    The important point is to evaluate the system you are using and set up a logical structure that helps you and the visitor.

    If you only have a small site of about 10 pages then the chances are that the visitor will visit all pages and you may as well just have one stylesheet.

  12. #12
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I quite often work on sites with 10,20 or even 30 stylesheets. However I make sure that at any one time there are only 3 or 4 linked to the page that's loading.
    No wonder you are so darned good at troubleshooting - my eyes would cross over working with so many stylesheets <lol>


    Nadia

  13. #13
    SitePoint Guru Rebirth Studios's Avatar
    Join Date
    Mar 2003
    Posts
    621
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How many KB does 500+ lines translate into?
    Mine is currently 565 = 11K

    I've recently started using commas to select multiple elements to decrease the file size very effectively.
    Me too, I also use this site sometimes to tidy things a bit...
    http://flumpcakes.co.uk/css/html-tidy/

    If the header, footer, navigation is the same on all pages then you would have one main stylesheet common to all pages. Then in the different sections you would just call in the extra css for that section.
    This is what I was thinking.

    However I make sure that at any one time there are only 3 or 4 linked to the page that's loading. If you are linking to 10 stylesheets then that is no better than just having the one in the first place.
    Having too many was what I was afraid of, but I was asking because I didn't know what a good balance should be.

  14. #14
    SitePoint Zealot
    Join Date
    Feb 2005
    Location
    sittin here on the Group W bench
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Below are examples from 2 "big" sites. Mozilla breaks it down by 'basic' styles and 'theme' styles, totaling 4 + the print.css (I'm considering using a similar method for my small sites). PayPal links to 11 stylesheets -- their approach probably isn't the best example to follow, based on Paul's suggestion as well as the fact that they use so much inline css.

    Mozilla:
    Code:
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <link rel="top" title="Home" href="http://www.mozilla.org/">
    <link rel="stylesheet" type="text/css" href="../css/print.css"  media="print">
    <link rel="stylesheet" type="text/css" href="../css/base/content.css"  media="all">
    <link rel="stylesheet" type="text/css" href="../css/cavendish/content.css" title="Cavendish" media="screen">
    <link rel="stylesheet" type="text/css" href="../css/base/template.css"  media="screen">
    <link rel="stylesheet" type="text/css" href="../css/cavendish/template.css" title="Cavendish" media="screen">
    <link rel="icon" href="../images/mozilla-16.png" type="image/png">
    
      <title>Getting Involved with mozilla.org</title>
      <meta http-equiv="Cache-Control" content="max-age=0">
    
      <meta http-equiv="Cache-Control" content="must-revalidate">
    <script src="../__utm.js" type="text/javascript"></script>
    </head>
    <body id="www-mozilla-org" class="deepLevel">
    PayPal:
    Code:
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>My Account - PayPal</title>
    <meta http-equiv="keywords" content="">
    <meta http-equiv="description" content="">
    <link rel="stylesheet" type="text/css" href="https://www.paypalobjects.com/WEBSCR-460-20070607-1/css/xpt.css">
    <link rel="stylesheet" type="text/css" href="https://www.paypalobjects.com/WEBSCR-460-20070607-1/css/xptInvoice.css">
    <link rel="stylesheet" type="text/css" href="https://www.paypalobjects.com/WEBSCR-460-20070607-1/css/xptObsolete.css">
    <link rel="stylesheet" type="text/css" href="https://www.paypalobjects.com/WEBSCR-460-20070607-1/css/xptlive.css">
    <link rel="stylesheet" type="text/css" href="https://www.paypalobjects.com/WEBSCR-460-20070607-1/css/default.css">
    <!--[if IE 6]><link rel="stylesheet" type="text/css" href="https://www.paypalobjects.com/WEBSCR-460-20070607-1/css/ie60win.css"><![endif]-->
    
    <!--[if IE 7]><link rel="stylesheet" type="text/css" href="https://www.paypalobjects.com/WEBSCR-460-20070607-1/css/ie70win.css"><![endif]-->
    
    <link rel="stylesheet" type="text/css" href="https://www.paypalobjects.com/WEBSCR-460-20070607-1/css/accountIndex.css">
    <link rel="stylesheet" type="text/css" href="https://www.paypalobjects.com/WEBSCR-460-20070607-1/css/flowCambio.css">
    <link rel="stylesheet" type="text/css" href="https://www.paypalobjects.com/WEBSCR-460-20070607-1/css/rosetta.css">
    <link rel="stylesheet" type="text/css" href="https://www.paypalobjects.com/WEBSCR-460-20070607-1/css/container.css">
    <link rel="stylesheet" type="text/css" href="https://www.paypalobjects.com/WEBSCR-460-20070607-1/css/autoTooltips.css">
    <link rel="stylesheet" type="text/css" href="https://www.paypalobjects.com/WEBSCR-460-20070607-1/css/en_US/lang.css">
    <style type="text/css"></style>
    <link rel="shortcut icon" href="https://www.paypalobjects.com/WEBSCR-460-20070607-1/en_US/i/icon/pp_favicon_x.ico">
    <script type="text/javascript" src="https://www.paypalobjects.com/WEBSCR-460-20070607-1/js/pp_main.js"></script>
    <script type="text/javascript" src="https://www.paypalobjects.com/WEBSCR-460-20070607-1/js/lib/yui/yahoo.js"></script>
    <script type="text/javascript" src="https://www.paypalobjects.com/WEBSCR-460-20070607-1/js/lib/yui/dom.js"></script>
    <script type="text/javascript" src="https://www.paypalobjects.com/WEBSCR-460-20070607-1/js/lib/yui/event.js"></script>
    <script type="text/javascript" src="https://www.paypalobjects.com/WEBSCR-460-20070607-1/js/account_overview.js"></script>
    <script type="text/javascript" src="https://www.paypalobjects.com/WEBSCR-460-20070607-1/js/lib/yui/container.js"></script>
    <script type="text/javascript" src="https://www.paypalobjects.com/WEBSCR-460-20070607-1/js/lib/yui/utilities.js"></script>
    <script type="text/javascript" src="https://www.paypalobjects.com/WEBSCR-460-20070607-1/js/autoTooltips.js"></script>
    <script type="text/javascript" src="https://www.paypalobjects.com/WEBSCR-460-20070607-1/js/dropdown.js"></script>
    
    </head>
    <body>

  15. #15
    SitePoint Guru Rebirth Studios's Avatar
    Join Date
    Mar 2003
    Posts
    621
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, PayPal's setup is large

    I finished segmenting the sheets, making a global one and a per page one to lighten the code.

    Since the print stylesheet is going to be somewhat based on a per page basis as well, I was thinking of making separate externals for that, but I think it might just be easier to place them in that page's stylesheet.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •