SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow Planning CSS for large intranets

    Hi,
    I need all your expert advise on planning CSS for large intranets/portals.
    Currently, I am assigned a task to fine tune CSS for an Intranet which has several thousand pages driven by one CSS file.

    The size of the CSS file had grown to over 130KB which is posing problems for download time. As of now I am looking at separating CSS styles based on header, footer, Left navigation. Content area handling needs additional thought since there are commonly shared styles.

    What could be an optimum approach to attack such a problem?
    A preferred approach would be to optimize the current CSS or
    splitting it based on page specific needs - but that would require a crawler to fetch required styles and link those required (anything better available?). However, performance is a factor to be considered too, keeping server trips to the minimum.

    Please share your valuable thoughts.

    Thanks!
    --Raj

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sgpraj
    As of now I am looking at separating CSS styles based on header, footer, Left navigation.
    Are they all the common elements? I'd think they should all be in one stylesheet with page specific styles being assigned to other stylesheets.

  3. #3
    SitePoint Zealot
    Join Date
    Sep 2006
    Posts
    107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tyssen
    Are they all the common elements? I'd think they should all be in one stylesheet with page specific styles being assigned to other stylesheets.
    Yeah, that would make the most sense. It will help when it comes time to make editing changes as well.

  4. #4
    SitePoint Guru
    Join Date
    Dec 1999
    Location
    Southampton, Hants, UK
    Posts
    672
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would also break the stylesheets up into different ones based on their function, I tend to use the following layout:


    global.css - this is linked to from a html document and imports the following 3 stylesheets, it also contains a global reset for margin,padding and borders.
    structure.css - this contains any attributes for structuring content (floats, margin, padding, position, display etc..)
    typography.css - this contains any attributes relating to the fonts of design (font family, size, line-height, weight and psuedo elements hover, active etc...)
    theme.css - this contains any colours, background images etc...

    That way about I read about on a blog a while back and it seemed pretty well layed out and thought about. If you want to change a simple theme of a site - just change theme.css, if you want a different structure for print, pda or other medium - change the structure.css.

    Hope this helps.


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
  •