O que é atualmente o melhor / CSS configuração HTML / Javascript?

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

Pergunta

Eu estou ficando cada vez mais em jQuery e assim criaram um site / base CSS HTML / Javascript que eu uso para todos os meus testes.

Uma vez que estes testes acabará por se transformar em PHP e ASP.NET MVC sites, quero aproveitar esta oportunidade para obter o básico para baixo à direita novamente para navegadores modernos e padrões web antes de construir as linguagens de script em cima dela.

Eu selecionado para uso:

  • XHTML 1.0 Strict
  • UTF-8 codificação
  • como poucas referências CSS quanto possível (colocar tudo em 1 arquivo CSS para velocidade de carregamento)
  • como poucas referências JavaScript como possível ( 1 arquivo javascript mais a referência base de código jQuery - Eu assumo usando o Google base de código jQuery é a melhor prática para a velocidade)
  • Eu verifico o meu código como eu construí-lo com a http://validator.w3.org

É mais lá qualquer coisa que eu preciso considerar?

Aqui está um exemplo de um dos meus sites de teste:

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");
}
Foi útil?

Solução

Pessoalmente eu gostaria de ligar para o evento clique via jQuery para assegurar a separação agradável, como este: 

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

Desta forma, você pode ligar para vários manipuladores de eventos. Se você usar apenas onclick AFAIK você só pode sempre usar um manipulador.

BTW você também pode usar personalizados e evento namespaces: 

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

é desencadeada por 

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

e 

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

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

HTH Alex

Outras dicas

Mover os blocos <script> ao parte inferior da página .

Com relação aos arquivos CSS e JS em geral, eu não iria combinar todos os arquivos JS para um único arquivo durante o desenvolvimento. Ele fica muito duro para desenvolver em um grande arquivo JS. Em vez disso usar um módulo que combina-on-the-fly ou durante a implantação.

Eu costumo ir com (ambos CSS e JS):

um arquivo geral:

  • project.css

e um por página:

  • project_welcome.css

e quaisquer componentes especiais (controles de login, vistas da área de anúncios etc.) têm um independentes também.

Dessa forma, você pode aplicar algumas técnicas de organização e não vai gerenciar louca que um único arquivo grande.

HTH Alex

Eu recomendo colocar as chamadas JS abaixo da tag body. Se seus scripts estão pendurados, em seguida, a página pode carregar e deixar a carga de comportamento (JS) após o fato. Tenho notado que a velocidade melhora muito com este método.

Veja isto: http://stevesouders.com/hpws/rule-js -bottom.php

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top