В какой последовательности правильно подключать скрипты и стили?
Здравствуйте!
Недавно подключал jQuery плагин и долго не мог его нормально подключить. Проблема была в подключении самих файлов этого плагина. В придачу к этому, в этого плагина была ещё и собственная конфигурация (Я не знаю, есть ли во всех плагинах своя конфигурация или нет), и само собой, что её тоже нужно было куда-то подключить.
Стоит так же отметить, что там подключались и стили/скрипты платного bootstrap шаблона, сам bootstrap, jquery и ещё очень много чего, плюс упомянутая выше конфигурация самого плагина. Я пытался поставить её куда угодно, но у меня то bootstrap скрипты отключались, то jQuery не подключался, то стили/скрипты шаблона переставали работать, то ошибки в исходниках данного плагина вылетали, то ошибки в конфигурации были, то оно не могло увидеть функции из исходных файлов плагина... Охх, проблем было с этим очень много.
Конечно, потом методом тыка я сделал всё же, но тогда у меня возник вопрос, в какой последовательности правильно подключать все эти скрипты и стили?
Сначала корневую библиотеку, потом плагин. Относительно как подключать конфигурацию, обычно в документации к такому плагину есть описание и нет однозначного ответа, так как это зависит как написан плагин.
Стили: сначала общие потом твои. Зависимость от того, что ты подключаешь допустим, если ты используешь bootstrap сначала его, потом в сети нашел какую-то тему для bootstrap, то ее уже после основной. Все что ниже перезаписывает верхние грубо говоря.
WapSter, а на счёт самой последовательности. Почему, если я менял скрипты или стили местами, то некоторые из них переставали работать, или ошибки вылетали, при том, что они не связанны друг с другой (Два плагина, скрипты шаблона и т.д.) ?
Nik Faraday, ну не видит, значит jquery нужно подключить раньше. Не видит класс либо его нет, или на момент запуска скрипта его еще нет. Уже же выше написал, давай задай вопрос еще раз
Я у себя собрал все (вообще все) скрипты и стили в all-script.js и all-css.css и мало того что поместил в head - я ещё по preload засылаю их http/2 server push-ем.
Плюсы - у пользователя один раз закачалось / закешировалось и затем весь сайт "летает"
Минусы - в сжатом виде эти два файла относительно большие получились - 80 и 90 Кb, PageSpeed от Гугла ругается что часть скриптов и стилей не используются в видимой области и якобы это ай-яй-яй - но учитывая общую оценку в 95 мобильный / 100 декстоп я на эту ругань и внимание не обращаю.