What is currently the best HTML/CSS/Javascript configuration?

StackOverflow https://stackoverflow.com/questions/1481022

Question

I'm getting more into jQuery and so have set up a HTML/Javascript/CSS base site which I use for all my tests.

Since these tests will eventually turn into PHP and ASP.NET MVC websites, I want to use this opportunity to get the basics down right again for modern browsers and web standards before building the scripting languages on top of it.

I've selected to use:

  • XHTML 1.0 Strict
  • UTF-8 encoding
  • as few CSS references as possible (put everything in 1 CSS file for loading speed)
  • as few Javascript references as possible (1 javascript file plus the jquery code base reference - I assume using the Google jQuery code base is best practice for speed)
  • I check my code as I build it with the http://validator.w3.org

Is there anything else I need to consider?

Here is an example of one of my test websites:

index.htm:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
        <title>Text XHTML Page</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" media="all"/>
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript" src="javascript/main.js"></script>       

    </head>

<body>
    <h1 class="highlightTitle">Text</h1>
    <p class="main">First</p>
    <p>Second</p>
    <p id="selected" class="regular">Third</p>
    <p>Fourth</p>

<form action="">
    <div>
        <input type="button" value="highlight it" onclick="highlightIt();countThem()" /> 
        <input type="button" value="highlight title" onclick="highlightTitle()" />
        <p>here is another paragraph</p>
    </div>
</form>

</body>
</html>

main.cs:

p.highlighted {
    background-color:orange;
}
h1.highlightTitle {
    background-color:yellow;
}
h1.deselected {
    background-color:#eee;
}
p.regular {
    font-weight: bold;
}

main.js:

google.load("jquery", "1.3.2");

function highlightIt() {
    $('#selected')
        .toggleClass('highlighted');
}

function countThem() {
    alert("there are " + $("p.main").size() + " paragraphs");
}

function highlightTitle() {
    $("h1").toggleClass("deselected");
}
Was it helpful?

Solution

Personally I would bind to the click event via jQuery to ensure nice separation, like this:

$("#yourId").bind("click", highlightIt);

This way you can bind to multiple event handlers. If you just use onclick AFAIK you can only ever use one handler.

BTW you can also use custom event and event namespaces:

$("#yourId").bind("beforeHighlighting", doSomething);

is triggered by

$("#yourId").trigger("beforeHighlighting");

and 

$(".hasAHelptext").bind("helptext.click", showHelptextFct);
$(".hasAHelptext").bind("click", otherFct);

// will only remove the showHelptextFct event handler
$(".hasAHelptext").unbind("helptext.click");

HTH Alex

OTHER TIPS

Move the <script> blocks to the bottom of the page.

With regard to CSS and JS files in general, I wouldn't combine all JS files to a single file during development. It gets very hard to develop in one big JS file. Rather use a module that combines them on-the-fly or during deployment.

I usually go with (both CSS and JS):

one general file:

  • project.css

and one per page:

  • project_welcome.css

and any special components (login controls, ad area views etc) have a seperate one as well.

That way you can apply some organizing techniques and won't go crazy managing that single large file.

HTH Alex

I would recommend putting the JS calls below the body tag. If your scripts are hanging, then the page can load and let the behavior (JS) load after the fact. I've noticed that speed greatly improves with this method.

Check this out: http://stevesouders.com/hpws/rule-js-bottom.php

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top