Несколько файлов JavaScript/CSS: лучшие практики?

Вы не указали явно, что у вас есть доступ к серверной части, но если предположить, что он у вас есть, я всегда использовал метод с использованием PHP для следующего:

// jquery.js.php
<?php
$jquery = ($_GET['r']) ? explode(',', $_GET['r']) : array('core', 'effects', 'browser', 'cookies', 'center', 'shuffle', 'filestyle', 'metadata');
foreach($jquery as $file) {
    echo file_get_contents('jquery.' . $file . '.js');
}
?>

С этим фрагментом кода на месте, я затем подключаю файл так же, как обычно:

<script type="text/javascript" src="jquery.js.php"></script>

А затем, если мне нужно будет использовать конкретный функционал, я просто передаю свои требования в строке запроса (jquery.js.php?r=core,effects). То же самое я делаю и для своих требований к CSS, если они также разнообразны.

Не рекомендуется использовать решения на основе JavaScript (такие как PHP Minify) для включения CSS, так как страница станет неработоспособной, если у посетителя отключен JavaScript.

Идея минификации и объединения файлов действительно отличная!

Я делаю что-то похожее на своих сайтах, но для упрощения разработки предлагаю следующий код:

if ($environment == 'production') {
  echo "<style>@import(/Styles/Combined.css);</style>";
} else {
  echo "<style>@import(/Styles/File1.css);</style>";
  echo "<style>@import(/Styles/File2.css);</style>";
}

Это позволит вам сохранять файлы отдельно во время разработки для удобного управления и использовать объединенный файл при развертывании для более быстрого загрузки страниц. Предполагается, что у вас есть возможность объединять файлы и изменять переменные в процессе развертывания.

Также обязательно обратите внимание на рекомендацию YUI: включайте ваши JS файлы внизу страницы, а CSS вверху. Это уменьшает время загрузки JS и положительно сказывается на восприятии остальной части страницы, что делает её более отзывчивой.

В своем проекте я обычно склеиваю все свои плагины jQuery в один файл с названием jquery.plugins.js, а затем подключаю саму библиотеку jQuery следующим образом:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

Таким образом, я упрощаю управление и загрузку плагинов, избегая множества отдельных ссылок. Это помогает улучшить производительность за счет уменьшения количества HTTP-запросов. Не забудьте также проверить совместимость плагинов с версией jQuery, которую вы используете!