SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is placing css in "includes" with their respective elements good / bad for performace

    Let me clarify the title.

    So lets say you have a high traffic website with fairly large files (150kb +). What might represent the index page might actually have 10 "include / partials" files such as a header include, footer include, logged in status include, etc...

    We are trying to determine the best approach to match code quality/readibility and site performance.

    I am in a discussion right now with a co-worker on whether we should continue serving up the 2-3 css files (in the <head)) that represent the whole site. One of them being a global.css which touches elements used across the board, and another (for example) called account.css which touches elements when the account page is accessed.

    The alternative being presented is placing the css that is directly related to code in these includes in the actual include files. An example is that we have some dropdowns that are only in affect when you are logged in, and they exist in their own "include". Would it be worth doing something like

    Code:
    ==dropdowns.php==
    
    <div......dropdown code goes here>....
    30 lines later
    
    <style type="text/css">
    #element {blah blah}
    </style>
    Or should the styles stay in their external css file (like global.css or even account.css as examples).

    My argument is that if they stay in the <head> they will get cached by the browser on the first load, whereas the other route is the styles get written into the page every time.

    I know places like Yahoo actually write their css into the page (for their homepage) versus linking to it in external files.

    Really, what it comes down to is what is the best practice in handling css and javascript when it comes to a large site with high traffic if you want to increase page load speed?

    Thanks,
    Bryan

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

    You can't place css in your includes because that would place it in the body which is invalid.

    There is an article here on sitepoint about improving css load times when you have multiple files.

    http://www.sitepoint.com/newsletter/...id=3&issue=162

  3. #3
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul

    Thanks

    So you are teling me this is invalid?

    <body>

    <style type="text/css">
    #blah {blah}
    </style>
    </body>

    ??

  4. #4
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    I would link them, if you put them in every file with style tags, that is a lot of code to scroll past, and lets not talk about updating...
    Now if you mean putting everything into a file that is above the opening body tag, and include that...that is valid, but I would still link them.
    Ryan B | My Blog | Twitter

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    So you are teling me this is invalid?

    <body>

    <style type="text/css">
    #blah {blah}
    </style>
    </body>
    lol - what are you too lazy to check yourself?

    Validation Output: 1 Error
    Line 9, Column 22: document type does not allow element "style" here.
    <style type="text/css">
    Yes its invalid as the style tag can only go in the head.

  6. #6
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, I cite laziness

    Thanks for the details, I just figure it would have been a warning, not invalid.
    There are so many circumstance where it is done though on so many sites. What is that saying "Bad code replicates itself"

  7. #7
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jag5311 View Post
    There are so many circumstance where it is done though on so many sites. What is that saying "Bad code replicates itself"
    Done what? Put style tags below the head.......and they work? Can you give an example? I have never seen this
    Ryan B | My Blog | Twitter

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi Ryan,
    Done what? Put style tags below the head....
    Yes although it is totally invalid to put style tags in the body section most (if not all) browsers will still use the styles correctly. However it's very bad coding and cannot be guaranteed to work in the future should browsers become more strict.

    There is in fact only one good reason to put style tags in the body section and that's when sending html emails because a lot of email clients strip out all the head content and replace it with their own. This means they also strip out the stylesheet and break the design. Therefore for html emails it is better to actually place the style tags in the body section as it is safer and won't get stripped (in most cases.) To tell the truth the safest way with html emails is actually to use inline css (styles directly applied to the tag itself) and not style blocks at all but this is another topic anyway

  9. #9
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Oh ok, I tried to do a style tag in an include file out of laziness, and it was am no go.
    Ryan B | My Blog | Twitter


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
  •