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.
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...
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.
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.
I'd use one stylesheet. As with JS, it's better to reduce HTTP requests to optimise the performance of your site.
having too many css files, it will take longer for the website to load as it has to load more then 1 file....
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.