SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast TheNinthPlayer's Avatar
    Join Date
    Jan 2004
    Location
    USA
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Good CSS habits?

    I'm looking for a professional opinion on this matter, so here is my question.

    I currently use a PHP template for my website. Basicly a header.php and footer.php. In the middle it will load the requested page.

    So when I created my CSS file I figured I should just create a CSS file for my main HEADER and FOOTER and another for the specific page I load in between those two. Each page that loads inbetween the header and footer has its own Style Sheet. Basicly Im splitting up the task of my CSS into to several sheets.

    Is this normaly considered a good idea or could this have unforseen (by me) side effects or cause confusion for accesability or anything?

  2. #2
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your question is a little confusing, however, CSS files are typically seperate from the main page and are called from between the <head> tags. Rather than looking at breaking CSS files into multiple parts based on sections of a webpage, they should be broken into multiple parts based on different pages on a site. One CSS file contain instructions that are fairly global in nature and can be called from any page. Secondary and tertiary CSS files can be made for page specific or group of pages specific instructions.

    Basically the idea is to limit the amount of stuff that has to be downloaded each time a page is downloaded. If all common instructions are in the same file, the browser can download this file on the first page request and then use a cached version for subsequent requests for that session. Using page or groups of pages specific CSS files allow instructions that aren't needed for every page to only be downloaded in relation to the page that needs them. Combined this strategy can reduce the average download requirements for each page view. This improves the load time of a site and reduces your bandwidth needs.

    Finally different CSS files could be built for different presentation purposes (e.g. printing, screen or audible reader).
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  3. #3
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,811
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I am presuming that your .php header and footer "shape" the page.
    If that is the case, then the "head" part of your page will almost certainly fit within (for example) head.php.

    If you wish to apply different styles to each page, you will want to have as much generic info as possible in one seperate .css file in order to reduce download time (mentioned by KLB).

    This should be a permanently referenced external style sheet.

    When you build your individual "unique" page, you can declare variables at the top, before including "head.php".

    Create a variable called $pagestyle, then have it declare .css properties. In your head.php, reference the main external styles as above, then use the variable $pagestyle within the head section using internal style sheet syntax, for example:

    Code:
    <style type="text/css">
    <? echo $pagestyle ?>
    </style>
    That should achieve what I think you're after, although I find it hard to imagine a time when you'd want to do things this way :?

    G'luck
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS

  4. #4
    SitePoint Wizard megamanXplosion's Avatar
    Join Date
    Jan 2004
    Location
    Kentucky, USA
    Posts
    1,099
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think the best method would be simply creating a single CSS file and using it globally. Splitting up the CSS into several files only complicates things and causes a slight slowdown on your site. When someone first comes to your site, their browsers will try to cache all of the available documents (CSS, JS, etc) and not letting them cache everything on the first-go will just make them wait for a second-go. Let's also not forget that each time you call a seperate CSS file the user's browser will need to make another request to the server which can slow things down a little bit more.

    Take the simpler route, use just one CSS file for everything.

  5. #5
    SitePoint Wizard megamanXplosion's Avatar
    Join Date
    Jan 2004
    Location
    Kentucky, USA
    Posts
    1,099
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Combined this strategy can reduce the average download requirements for each page view.
    It might reduce the average download requirements but it causes a perceptual slowdown because the user has to download something new on every section of the site which will make the site seem slower to the user. Technical stats are nice but perception is a lot more important, imho.

  6. #6
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by megamanXplosion
    It might reduce the average download requirements but it causes a perceptual slowdown because the user has to download something new on every section of the site which will make the site seem slower to the user. Technical stats are nice but perception is a lot more important, imho.
    I was thinking in terms of a site with very heavy styling. On one section of my site, there are couple kb of styles that are unique just for that section. Thus I use multiple stylesheets such that users of other sections don't have to download styles they don't need.

    In my case while true the section with a unique stylesheet may be slowed down ever so slightly, everything else will be speeded up. Also it reduces my bandwidth requirements and when one is sucking 70gb of bandwidth per month every kb of download reduction matters.
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  7. #7
    SitePoint Enthusiast TheNinthPlayer's Avatar
    Join Date
    Jan 2004
    Location
    USA
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is how my php page is setup to load the stylesheets to answer some questions

    Code:
    <link rel="stylesheet" media="screen" type="text/css" href="<?php print LOCATION ?>./screen.css" />
    <link rel="stylesheet" media="screen" type="text/css" href="./<?php print FILENAME ?>.css" />
    Ther first line loads the sheet for my main site (header & footer content). The second line loads a specific sheet that depends which page they are on. I did this because not everyone is going to access every page of the site so why make them download a huge CSS file when they could only download what they need when they need it.


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
  •