SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard simplecode's Avatar
    Join Date
    Jun 2006
    Posts
    1,129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    When should you use external JavaScript/CSS files? (was "Q")

    1>When should you use an external JavaScript as opposed to writing the JavaScript directly in your HTML document?
    2>What is the advantage of using an external CSS file?

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by simplecode
    1>When should you use an external JavaScript as opposed to writing the JavaScript directly in your HTML document?
    I can't think of a good reason to include JavaScript inside the HTML document, unless it's a very quick test page that you'll discard.

    Separating content (HTML) from presentation (CSS) and behaviour (JavaScript) makes for easier maintenance.

    Quote Originally Posted by simplecode
    2>What is the advantage of using an external CSS file?
    Separation between content and presentation, as mentioned above. You'll have a single file to edit if you want to redesign your web site, instead of editing possibly thousands of HTML documents.

    Also, it has a performance benefit. An external CSS file will be cached by the visitors' browsers. That means lower bandwidth usage for your server, and quicker page loads for your visitors.

    Off Topic:

    Please try to come up with more descriptive thread titles than 'Q'.
    Birnam wood is come to Dunsinane

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,812
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    It is always better for finished web pages to have each component (HTML, CSS, and Javascript) in completely separate files. Here are a few of the reasons.

    1. It makes for faster loading pages since common Javascript and CSS only needs to be loaded once.
    2. It makes for higher rankings in the search engines as there is less in the HTML file that is not actual page content.
    3. It makes it easier to change the appearance and behaviour of your site just by changing the CSS and/or Javascript files without having to go through changing every web page on your site.
    4. It makes each of them easier to maintain since each file conmtains a single language and not a jumbled combination of 2 or 3.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Predating (by several decades) the W3C's dictates regarding the separation of page components was the programming principle of colocation of code. It argues that code should be in close proximity to the data it operates on for ease of maintenance, quicker execution, etc., so forth and so on. So you see, there's more than one way to look at the problem. (Colocation of code was one of the arguments originally used to justify object-oriented languages, by the way.)

    If code is reused, it certainly makes sense for it to be placed in a separate, shared file. If, however, code is only used on one page and especially if the code modifies temporarily, methods, functions, or rules in the shared file, then the question isn't so cut and dry.

    The bottom line is that, in the real world, there is a need for both external and inline rules and scripts; that's why they both exist. Most of the time external style sheets and script files offer efficiencies. In that case use them. When an internal style or script offers greater efficiency, use it.


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
  •