Results 1 to 6 of 6

Thread: CSS general question

  1. #1
    Join Date
    Feb 2012

    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" />

  2. #2
    Join Date
    Feb 2012
    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.

  3. #3
    Join Date
    May 2008

    Why use external resources

    Well there are a few reason's why to use external resources:

    • First and foremost is maintainability. Breaking up a page into smaller parts has the advantage of making the seperate parts easier to read and understand as opposed to having all the HTML, CSS and Javascript in one huge file.
    • Another reason is that quite frequently you end up using javascript libs from other people or organisations on the web. To keep your own code separate from theirs you include all js seperately.
    • 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.

  4. #4
    Join Date
    Feb 2012
    Thank you very much gentlemen for your help.

  5. #5
    Join Date
    Dec 2005
    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.

    Ditto goes for JavaScript, although, this might not always be possible (using external scripts/libraries like google maps, CDN hosted jQuery, etc).

    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.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...

  6. #6
    Join Date
    May 2008
    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.

    Kind regards,

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center



X vBulletin 4.2.2 Debug Information

  • Page Generation 0.14747 seconds
  • Memory Usage 2,888KB
  • Queries Executed 15 (?)
More Information
Template Usage (32):
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (6)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (6)postbit
  • (6)postbit_onlinestatus
  • (6)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (70):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates