CSS general question
I am new to web designing. looking at codes of some advanced site such as blizzard, i have noticed they have many seperate CSS files and java scripts. i was wondering why and why not just combine all of them in one? thanks.
"<link title="World of Warcraft - News" href="/wow/en/feed/news" type="application/atom+xml" rel="alternate"/>
<link rel="stylesheet" type="text/css" media="all" href="/wow/static/css/wow.css?v20" />
<link rel="stylesheet" type="text/css" media="all" href="/wow/static/local-common/css/cms/homepage.css?v39" />
<link rel="stylesheet" type="text/css" media="all" href="/wow/static/local-common/css/cms/blog.css?v39" />
<link rel="stylesheet" type="text/css" media="all" href="/wow/static/local-common/css/cms/cms-common.css?v39" />
<link rel="stylesheet" type="text/css" media="all" href="/wow/static/css/cms.css?v20" />
For example is if you wanted to manage different parts or elements of a web page.
You might find it helpful to create a separate style sheet to control the appear of your
web site's forms, such as in the example code above.
Why use external resources
Well there are a few reason's why to use external resources:
- Using this method you can also work on one website with more people. One working on CSS another one working on JS .. well you get the picture.
- If you use versioning system of sorts it helps you to seperate code modifications. When you edit one file and do a check-in and something is wrong you can rollback to a previous version of that file. When all code is in one file you have to roll-back the entire file and maybe inadvertently changing back other types of code.
- Using this method allows CDN usage (content delivery networks) which essentially is serving files from different servers to spread load.
- Caching could also be an issue. With seperate files the individual files are cached on the webbrowser. If one file is modified only one file has to be retrieved from the server again. If you have everything in one file then every change invalidates the local file so the entire compound page has to be retrieved.
- Last but not least is performance. A browser can get a few files at a time so if you seperate your code you get some speed improvement because of the simultaneous retrieval of files. Be careful!!! More files doesn't mean increased performance. Default HTTP allows for 2 simultaneous files being retrieved at the same time from one server, HTTP 1.1 allows for more than that. So it's a fine line
This is by no means a comprehensive list, but these are the ones that come to mind. The most important reason IMO for code separation is maintainability.
Last edited by theiwaz; 02-20-2012 at 05:00 AM.
Thank you very much gentlemen for your help.
For the record, on live sites (non-dev), you shouldn't be using multiple stylesheets - you should be using a single stylesheet with all CSS assets that would be served on that specific page combined into it.
This is for performance reasons where HTTP requests can be the limiting factor. If you've got 10 stylesheets at 10kb each, its faster to make a single HTTP request of 100kb than 10 HTTP request of 10kb each.
I know that YooTheme uses a server side script in their Warp6 framework to combined and all CSS assets on a page into a single file before sending them to the browser.
Last edited by aj_nsc; 02-20-2012 at 07:18 PM.
Totally agree with the poster above. There are a lot of JS/CSS compression tools out there which also provide a function to compress and combine files of the same type, but that's a more advanced topic. If you are just starting out get used to using file includes because of this:
One important thing I failed to mention in my reaction is re-using the external scripts accross multiple pages. This was If a script or css you can just change the included files and automatically change all the pages who use the included scripts. Maintenance wise a big timesaver.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)