“Правильная" интеграция верстки в Битрикс

В Битрикс есть определенная свобода и эту свободу часто используют неправильно, особенно это связано с интеграцией верстки, а так же внедрение различных кастомных модулей и компонентов, в этой статье хочу показать свой “правильный” подход к кастомизации и интеграции своего шаблона.

Если вы совсем новичок в Bitrix, то сначала лучше почитать официальную документацию о шаблонах (тут).

В Bitrix можно размешать свои шаблоны в двух местах, это /bitrix/templates и /local/templates.

На этом месте мы сразу должны договориться раз и навсегда, папку /bitrix мы не трогаем, а то в 2018 году все еще встречаются проекты и довольно-таки крупные, где много кастомного кода в папке /bitrix.

Как должна/может выглядеть “правильная” структура папки /local:

• /templates - папка с кастомными шаблонами сайта, аналогично /bitrix/templates
• /php_interface - аналогичный функционал /bitrix/php_interface
• /includes - все файлы для подключений (номера телефонов, статический текст и т.п.)
• /modules - кастомные модули
• /components - кастомные компоненты

Дополнительно в своей практике использую еще эти папки в /local:

• /ajax - папка с файлами для ajax обработок
• /images - папка со всеми файлами для шаблона, можно конечно в папке шаблона их хранить, но мне так больше удобнее
• /fonts - подключаемые шрифты, если таких нет в Google fonts и т.п.
• /blocks - исторически сложилось, со времен работы в студии по веб-разработке, что все стили (CSS/SCSS) и JS файлы у меня хранятся в блоках, аналог БЭМ, можно почитать об этом тут, но для этого дополнительно использую свой кастомный модуль и сборщик gulp.

В последующих статьях расскажу о модуле, который использую для папки /blocks и как подключаю стили в компонентах, так как в моих проектах, компоненты вообще не имеют внутри себя файл style.css, все подключатся в component_epilog.php.

Дальнейшая интеграция стандартная, работает все так же как и в папке /bitrix.

Итоги по данной статье:

Все кастомные модули, шаблоны, обработчики должны быть в папке /local, не в /bitrix; В компонентах оставляем только PHP код, весь фронт JS и CSS, лучше хранить в другом месте и подключать его в component_epilog.php.