SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Evangelist
    Join Date
    May 2007
    Location
    Kent in Uk
    Posts
    538
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Stylesheet layout

    What would people advise for the most efficient stylesheet layout. Is it just down to how the developer best works with his own code or may there be a problem where certain layouts could slow down the server reading it so have an effect on download time. For maintenance, and because my site is quite small I prefer to seperate each pages style elements. However I have also seen sheets that tend to go from head to footer (encompassing all pages). Any thoughts?

    cass27

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Making multiple calls to the server to request many stylesheets can slow down loading times - so it's best to keep the number of stylesheets to a minimum.

    I put all my global styles in one CSS file and create a new stylesheet for a page if it contains very different styles.

    I don't create a new stylesheet for each page - because chances are you will be re-using the same styles - and forcing the client to re-download the styles over and over again. CSS is cached on the client so using the same files means faster loading pages.

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I put everything in one file, and then start with global style rules (like body, img, table, and so forth), then follow that with selectors in the order they appear in the HTML template.

  4. #4
    SitePoint Evangelist
    Join Date
    May 2007
    Location
    Kent in Uk
    Posts
    538
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, you mis-understand. I mean on the layout of my CSS stylesheet it is layed out in terms of what pages the elements are on. I find this easy to maintain. If I have a problem on a certain page I can quite quickly go to the element by going to the section in the stylesheet for that page. However, to a server this method may be confusing to how a server reads the sheet. It may be expecting to go from find all the heads (of each page), all the nav bars (of each page) down to the footer. Should I be laying out my sheet like this or does it not reallly matter?

    cass27

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Servers don't read stylesheets. They just deliver them. And as for the layout of a stylesheet, as I said already, I find it best to follow the source order in the HTML (header, menu, content, sidebar/s, footer). But that's just me.

  6. #6
    SitePoint Evangelist
    Join Date
    May 2007
    Location
    Kent in Uk
    Posts
    538
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks dan, i guess that answers my question that as far as the actual layout of the stylesheet the best advice is go with what works best for the individual. Layout style is not going to slow down download of web site.

  7. #7
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As one of the main advantages to using a separate stylesheet is to enable common styles betwen all pages to maintain some sort of uniformity across the site, I would think that the majority of styles in a stylesheet would be common to all pages. As such, I would find it confusing separating things depending on pages. I tend to lay out stylesheets in the same manner as Dan - if you need to vary something near the top of the page, it will most likely be towards the top of the stylesheet irrespective of page.

  8. #8
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd say go with what works best for you.

    Personally I have sections for Global Resets, Links, Navigation, Headings, Lists, Forms, Page Sections and "Other Stuff".

    I also tend to have all my rules on a single line which everybody else in the world absolutely HATES but it works better for me for some reason!
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    I work on large sites ( 1000 pages etc) that regularly have over 30 stylesheets attached. There is no way that a user is going to travel through all 1000 pages in one sitting and therefore there is absolutely no reason for them to have to load all 30 stylesheets in one go.

    However the pages are constructed so that each page will never have more than a few (half a dozen at most) stylesheets attached at any one time.

    There will be a main structure stylesheet that holds all the common elements which is used on all pages and then there will be section stylesheets that hold common styles for different sections of the site. Some people also like to keep a separate stylesheet for color changes so that the whole look of the site can be changed in one place but that needs careful management to work correctly.

    Where you have one page with a lot of completely unique styling then you may as well have a separate stylesheet for it rather than make all other 999 pages look at the css that they will never use.

    On large sites you will find that areas of the site are often designed differently although they may have common header, footers and navigation but other elements are unique to that section. Therefore it makes sense to load stylesheets for each section as required.

    In the end it comes down to what best works for the site in hand and what works best for the author as no two sites are the same and people like to work differently also

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    I also tend to have all my rules on a single line which everybody else in the world absolutely HATES
    Yes I hate that as I can't read it like that for some reason I find it easier to spot mistakes when everything is formatted nicely in one column.

  11. #11
    SitePoint Evangelist
    Join Date
    May 2007
    Location
    Kent in Uk
    Posts
    538
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Yes I hate that as I can't read it like that for some reason I find it easier to spot mistakes when everything is formatted nicely in one column.
    Yes but columns are so long. Take up so much space. Its much easier to lie along the desk sideways to check out a row on the css page...

  12. #12
    SitePoint Wizard holmescreek's Avatar
    Join Date
    Mar 2001
    Location
    Northwest Florida
    Posts
    1,707
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post

    I put all my global styles in one CSS file and create a new stylesheet for a page if it contains very different styles.

    I do the same using a globals.css that define even the heading and paragraph styles site wide. Then as Mark mentioned, create a new style sheet if you need to override something in globals.css OR in some cases you may need to create a style sheet for a unique page, for instance, a page with a css calendar might need a calendar.css created. I wouldn't want all those calendar styles loading for every page in the site that actually didn't need those styles -- or increasing the load time on for instance the home page.
    intragenesis, llc professional web & graphic design


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
  •