Several CSS files or one?

Discussion in 'CSS' started by Gediminas, May 25, 2011.

  1. #1
    Hi,
    I faced a problem while coding a design. Web site consists of several pages with very different layout. What is better: to use several CSS files or one big? In case of several CSS files, I would use one common CSS file which describes common elements like header. So a page would include two CSS files: common and layout specific.
    I hope I described my problem clearly enough.
     
    Gediminas, May 25, 2011 IP
  2. sburst

    sburst Peon

    Messages:
    39
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Using multiple stylesheets wouldn't matter too much nowadays, any difference in load times wouldn't be noticeable unless your still on dial-up living in an igloo.

    However, saying that, I tend to use one stylesheet and seperate the sections of the site by using:

    
    
    /* ================================================================ 
         HEADER
    =================================================================== */
    
    css
    css
    css
    css
    css
    
    
    /* ================================================================ 
         MENU
    =================================================================== */
    
    css
    css
    css
    css
    
    
    Code (markup):
    etc...
     
    sburst, May 25, 2011 IP
  3. mlblinco

    mlblinco Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I would always recommend using multiple CSS files if you are redistribution the design or files for pure ease. Personally i use only one, as i feel it works best with my coding ways etc etc.
     
    mlblinco, May 25, 2011 IP
  4. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #4
    So everyone so far recommends YOU use multiple sheets even though they don't.

    The truth is, use one sheet. Anything you can do to limit the number of http requests reduces traffic, decreases download time, and decreases congestion along with the chance your request isn't lost or requested multiple times.
     
    drhowarddrfine, May 25, 2011 IP
  5. k4sper

    k4sper Peon

    Messages:
    103
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I always use only one sheet. Just keep things organized in it.
     
    k4sper, May 25, 2011 IP
  6. vaivabi

    vaivabi Peon

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I will go for single style sheet cause it will reduce HTTP request on server. The fewer the better. :)
     
    vaivabi, May 26, 2011 IP
  7. LeeB

    LeeB Peon

    Messages:
    42
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    I'd use one stylesheet.

    As with JS, it's better to reduce HTTP requests to optimise the performance of your site.
     
    LeeB, May 27, 2011 IP
  8. ApocalypseXL

    ApocalypseXL Notable Member

    Messages:
    6,095
    Likes Received:
    103
    Best Answers:
    5
    Trophy Points:
    240
    #8
    Use just 1 and minify it .
     
    ApocalypseXL, May 28, 2011 IP
  9. Guru_101

    Guru_101 Member

    Messages:
    51
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    43
    #9
    having too many css files, it will take longer for the website to load as it has to load more then 1 file....
     
    Guru_101, May 29, 2011 IP
  10. pixelmarkup

    pixelmarkup Peon

    Messages:
    16
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    I'd go for ONE.
     
    pixelmarkup, May 30, 2011 IP
  11. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #11
    My answer is... are you using media types like a good little dooby? If so, one or two PER MEDIA TYPE is fine. I would never have more than two (template and current page) per media type since the extra overhead from handshaking can slow down the page load. Generally I only have one per media type -- *SHOCK* named for their media type.

    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="print.css"
    	media="print"
    />
    
    <link
    	type="text/css"
    	rel="stylesheet"
    	href="handheld.css"
    	media="handheld"
    />
    
    Code (markup):
    Screen, print, handheld. Way better than the vague/meaningless/idiotic "style.css" with no media attributes you see people using -- or worse the dumbass 'frameworks' that end up requiring ten to twenty separate files to even function.
     
    deathshadow, Jun 4, 2011 IP