Тоже столкнулся с данной проблемой.
Она на самом деле шире чем просто порядок подключения файлов.
Попробую расписать подробнее суть проблемы.
Проблема №1Как мы на проекте выполняем подключение стилей шаблона:
Общие стили шаблона мы подключаем с использованием главного модуля через Asset.
Код |
---|
Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . '/assets/styles/generic/transitions.css', false); |
Также у нас есть стили компонентов, которые битрикс подключает автоматически.
Но внутри компонентов может понадобиться подключить другие стили.
Например в данном случае мы подключаем стили и скрипты Swiper.
Также подключаем их с использованием главного модуля через Asset в component_epilog.php.
Код |
---|
Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . '/assets/vendors/swiper/dist/swiper-bundle.min.css', false);
|
Стили страниц мы подключаем с использованием главного модуля через Asset.
Код |
---|
Asset::getInstance()->addCss(SITE_DIR . 'style.css', false);
|
На выходе мы получаем вот такой порядок подключения файлов стилей:
- page_e075568aa9986b5d0dfee9808010710e_v1.css?16443223452068
- template_336e9cf2eed8f19d39118eb918a64a21_v1.css?164432234555761
Такой порядок ломает логику каскада CSS!
Как должно быть:
- template_336e9cf2eed8f19d39118eb918a64a21_v1.css?164432234555761
- page_e075568aa9986b5d0dfee9808010710e_v1.css?16443223452068
Проблема №2Вторая проблема кроется в содержимом файла page_e075568aa9986b5d0dfee9808010710e_v1.css?16443223452068.
Порядок сборки файлов стилей вообще не имеет смысла:
Код |
---|
/* /style.css?1644318886594 */
/* /local/templates/main/components/bitrix/news.list/product.list.carousel/style.css?16443205541166 */
/* /local/templates/main/assets/vendors/swiper/dist/swiper-bundle.min.css?164431416620114 */ |
Т.е. сперва включаются стили страницы, а потом уже стили компонента размещённого на ней, что абсолютно не логично и
вновь ломает логику каскада CSS!
Как должно быть:
Код |
---|
/* /local/templates/main/assets/vendors/swiper/dist/swiper-bundle.min.css?164431416620114 */
/* /local/templates/main/components/bitrix/news.list/product.list.carousel/style.css?16443205541166 */
/* /style.css?1644318886594 */ |
Хорошо, очевидно, что вторым параметром мы передаём false во всех случаях подключения стилей.
Если мы подключим дополнительные стили компонента и стили страницы с параметром true - они попаду в файл template_336e9cf2eed8f19d39118eb918a64a21_v1.css?164432234555761.
И мы увидим следующий порядок стилей в template_336e9cf2eed8f19d39118eb918a64a21_v1.css?164432234555761
Код |
---|
/* /local/templates/main/assets/styles/generic/transitions.css?164422799834 */
/* Прочие глобальные стили */
/* /style.css?1644318886594 */
/* /local/templates/main/assets/vendors/swiper/dist/swiper-bundle.min.css?164431416620114 */
|
Опять не верный порядок подключения стилей: стили Swiper подключаются после стилей страницы что
вновь ломает логику каскада CSS!
Как должно быть:
Код |
---|
/* /local/templates/main/assets/styles/generic/transitions.css?164422799834 */
/* Прочие глобальные стили */
/* /local/templates/main/assets/vendors/swiper/dist/swiper-bundle.min.css?164431416620114 */
/* /style.css?1644318886594 */
|
Проблема №3
Так сказать вишенка на торте: проблема с порядком подключения файлов актуальна исключительно для CSS!
А проблема с порядком сборки файлов актуальна и для CSS и для JS файлов.
Содержимое файла page_51e5d331108e789163bdd0926b2ddde7_v1.js?1644321931142197:
Код |
---|
/* /script.js?164422920715*/
/* /local/templates/main/components/bitrix/news.list/product.list.carousel/script.js?16443219302480*/
/* /local/templates/main/assets/vendors/swiper/dist/swiper-bundle.min.js?1644229928138769*/
|
Т.е. сперва включаются скрипты страницы, потом скрипты компонента размещённого на ней и уже в самом конце скрипты которые мы дополнительно подключили в компоненте.
В случае JS проблема не так очевидна, так как мы обычно дожидаемся готовности документа через $( document ).ready() или DOMContentLoaded.
Как должно быть:
Код |
---|
/* /local/templates/main/assets/vendors/swiper/dist/swiper-bundle.min.js?1644229928138769*/
/* /local/templates/main/components/bitrix/news.list/product.list.carousel/script.js?16443219302480*/
/* /script.js?164422920715*/
|
Админы/Разработчики Битрикс, как прокомментируете и что посоветуете?
Коллеги кто и как решает данный вопрос?