Eu normalmente separo meu código de forma modular, onde cada parte da página (cada módulo) recebe seu próprio arquivo para CSS, JS e HTML (assim como PHP / qualquer código do lado do servidor que você usa).
Cada módulo é agrupado em um elemento div ou section (ou o que quer que seja semântico) com um ID único (óbvio), como este:
<section id="recent-comments">
<h2>Recent comments</h2>
<ul>
...
</ul>
</section>
Em seguida, criei um arquivo CSS com o nome do módulo ( recent-comments.css ) e um arquivo JS ( recent-comments.js ). O arquivo JS pode ser parecido com isto:
Base.modules.RecentComments = {
init: function () {
this.autoRefreshComments(); // this is just an example
},
autoRefreshComments: function () {
setInterval(function () {
$('#recent-comments').load('/new-comments');
}, 5000);
}
};
Se eu começar a escrever código em um arquivo de módulo que eu acho que pode ser reutilizado, normalmente eu o transformo em um plug-in jQuery (que pode ser reutilizado).
Isso leva a vários CSS e arquivos JS diferentes, mas é claro que eu mesclei todos em um só antes de exibi-los no navegador.
O benefício disso é que você pode rapidamente encontrar código relacionado a uma parte de sua página e seus arquivos normalmente são mantidos bem curtos e concisos.
Eu usei para exibir diferentes JS / CSS para cada página (apenas os módulos que estavam em uso nessa página), mas não acho que isso melhora o desempenho, pois leva a um único CSS e Arquivos JS por página em vez de apenas um arquivo CSS e JS que é armazenado em cache no primeiro carregamento da página.
Editar: btw, é assim que a "classe" básica se parece:
var Base = {
modules: [],
init: function () {
Base.runModules();
},
runModules: function () {
for (var module in Base.modules) {
// Work out the HTML-ID based on the module-name (RecentComments == recent-comments)
var id = module.replace(/([A-Z])/g, '-$1').toLowerCase();
id = id.substring(0, 1) == '-' ? id.substring(1) : id;
var mod = jQuery('#' + id);
if (
mod.length &&
typeof(Base.modules[module]) != 'undefined' &&
typeof(Base.modules[module].init) == 'function'
) {
Base.modules[module].init(mod);
}
}
}
};
$(Base.init);