Для подключение стили и скрипты в битрикс рекомендовано использовать класс Asset, старый метод CMain уже не рекомендовано использовать.
Для подключение стили/скрипты на любой страницы надо прописать такой код:
<?php
use Bitrix\Main\Page\Asset;
use Bitrix\Main\Page\AssetLocation;
//Метод добавляет js в секцию <head>
Asset::getInstance()->addJs("/file/path/Script.js", $additional = false);
//Метод добавляет css в секцию <head>
Asset::getInstance()->addCss("/file/path/style.css", $additional = false);
//Метод добавляет строку в секцию <head>
Asset::getInstance()->addString("<script>console.log('Hi')</script>", $unique = false, AssetLocation::AFTER_JS);
Asset::getInstance()->addString("<link rel='stylesheet' type='text/css' href='/file/path/style.css'>");
$additional — Добавление файлов стилей или js в конец списка ресурсов шаблона. По умолчание false.
$unique — проверка на никальность, если есть такой скрипт не будет дублироватся
Где выводить строку. Возможные значения
AssetLocation::BEFORE_CSS — до подключение CSS, перед другими CSS
AssetLocation::AFTER_CSS — после подключение CSS, в конце списка
AssetLocation::AFTER_JS_KERNEL — под подключение JS ядра битрикса
AssetLocation::AFTER_JS — поле подключение JS
AssetLocation::BODY_END — в кондце страницы, перед закрытие body
В дополнение:
Если необходимо чтобы скрипты не переместились в конце страницы при включение опции «Переместить весь Javascript в конец страницы» надо для добавить атрибут data-skip-moving=’true’.
<script type="text/javascript" data-skip-moving="true" src="/file/path/script.js"></script>
//OR
<script type="text/javascript" data-skip-moving="true">
console.log('Hi');
</script>