Лучший способ представить файлы CSS и JS для большого проекта

Question

Как лучше всего представлять файлы CSS для большого проекта

Я использую CodeIgniter , и было бы 100 просмотров, и почти у них разная структура, поэтому у меня много вариантов, но я не знаю, какой из них лучший, поэтому, пожалуйста, помогите 1005 *

1. Создайте один файл для CSS и один файл для JS
2. Создайте файл CSS для каждого представления и JS для каждого представления
3. Создайте простую таблицу базы данных для хранения связанных файлов для каждый метод

например

id ----- method_name ---- files (I will normalize it )
1        /test/first      first.css,first.js
and so on 

или заставить функцию PHP получать связанные файлы в виде текста из PHP

например

<?php
function get_assoc($view)
{
      switch($view):
          case '/test/first':
             echo "<script>alert(); </script><style>p{font-weight:bold;}</style>"; 
          break; 
      endswitch; 
}
?>

А как насчет кеширования? Производительность является важным фактором. Спасибо.

Answer 1

Мне нравится разделять каждый раздел сброс / типография / формы / таблицы, таким образом, я не теряюсь.Не бойтесь использовать столько разных файлов, сколько вам нужно (для целей разработки).

Как только вы будете готовы перейти в рабочий / живой режим, возьмите «инструмент сборки» из «html5boilerplate» и сожмите все ваши cssв один файл, то же самое для JS.Это также минимизирует ваш код и кеширует ваши файлы.просто держите ваши несжатые файлы под рукой, если вам нужно сделать серьезное редактирование

<!-- CSS -->
<link rel=stylesheet href="assets/css/reset.css" >
<link rel=stylesheet href="assets/css/typography.css" >
<link rel=stylesheet href="assets/css/tools.css" >
<link rel=stylesheet href="assets/css/tables.css" >
<link rel=stylesheet href="assets/css/forms.css" >
<link rel=stylesheet href="assets/css/plugins.css" >


<!-- Script -->
<script src="assets/js/modernizr2.0.js"></script>
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js></script>
<script src="assets/js/plugins.js"></script>
<script src="assets/js/tools.js"></script>
<script src="assets/js/tables.js"></script>
<script src="assets/js/forms.js"></script>
<script src="assets/js/functions.js"></script>

Затем я хочу обернуть каждый (js) файл как объект, опять же, это помогает с удобочитаемостью.* пример:

(function($){

var ToolsObj = {

    init : function(){

        this.tooltip();
        this.tabs();
        this.pagination();
        this.alerts();
        this.dropdowns();
        this.lightbox();

    },
    tooltip : function(){

        //tooltip code
    },
    tabs : function(){

        //tabs code
    },
    pagination : function(){

    },
    alerts : function(){

        //alert messages code
    },
    dropdowns : function(){

        //dropdown-menu code
    },
    lightbox : function(){

        //lightbox code

    }


}


$(function(){

    ToolsObj.init();
});

 })(jQuery.noConflict());

Надеюсь, это даст вам некоторое представление о моем рабочем процессе.Вы также можете проверить, существует ли каждый элемент в документе перед запуском объектов.

Answer 2

База данных = нет

Не используйте базу данных для этого. Файлы CSS / JS, необходимые для отображения представления, напрямую связаны с исходным кодом, поэтому сохраняйте эту информацию в источнике (особенно если вы используете SCM, такой как Git или SVN).

CSS / JS = презентация

Поскольку эти файлы связаны с презентацией / пользовательским интерфейсом, я бы рекомендовал делегировать «ответственность» за их загрузку самим представлениям. Контроллеры и модели не должны ничего знать о CSS / JS, необходимом для отображения представления.

Быть модульным

Организовать файлы в отдельные модульные единицы. У вас не должно быть отдельного файла CSS / JS для каждого представления, ЕСЛИ у вас не будет абсолютно отдельных функций для каждого представления. Чем больше вы поделитесь этими файлами среди представлений, тем лучше вам будет.

Использовать кэширование, а не бороться с ним

Я знаю, что задница - боль в том, чтобы переименовывать файл каждый раз, когда вы его изменяете, но это действительно хороший подход. Использование подходов аннулирования кэша (например, URL? Time = ...) просто создает дополнительную нагрузку на сервер и клиенты без веской причины. Просто потратьте две секунды, чтобы переименовать ваш файл "styles.css" в "styles_v2.css". Вы поблагодарите себя позже. (И помните, вам не нужно переименовывать его для каждого изменения разработчика - только когда оно достаточно стабильно для QA / производства).

Преждевременная оптимизация = корень зла

Наконец - и что самое важное - НИКОГДА НЕ БЫСТРО ОПТИМИЗИРУЙТЕ! Я видел слишком много людей, которые минимизируют и gzip-файлы своих активов все время, только чтобы несколько дней спустя их пересмотреть. Либо создайте настоящий процесс сборки, либо подождите, пока все стабилизируется, чтобы слишком беспокоиться о тонкой настройке.

Answer 3

Вы уже вызывали базу данных страниц, чтобы выяснить, какие представления следует использовать и т. Д.?Возможно, понадобятся основные js и css, которые будут использоваться для всех страниц, а затем отдельные, связанные через DB, которые специально используются только определенными представлениями.

Что касается кэширования ... Эти файлы будут кэшироватьсябраузеры, если они имеют одинаковое имя запроса.Обычно я автоматически устанавливаю их версию с помощью метода представления, который выглядит примерно так:

function autoversion($filename) {
    $time = filemtime($filename);
    return $filename . '?v=' . $time;
}

Если у вас есть система сборки, которая может создавать версии этих файлов для вас, вы получите небольшой прирост производительности.