Вёрстка и шаблоны для 1С-Битрикс
Шаблоны компонентов — здесь живёт 70% проблем
Компонентная система Битрикс устроена просто: есть компонент (логика), есть шаблон (представление). Проблема в том, что в реальных проектах эта граница размывается. Открываешь template.php у предыдущего подрядчика — а там SQL-запросы, бизнес-логика и inline-стили в одном файле. Мы жёстко разделяем: логика — в result_modifier.php или component_epilog.php, представление — в template.php. Никакого CIBlockElement::GetList в шаблоне.
Структура, которой придерживаемся
Кастомный шаблон компонента — это не один файл, а структура:
-
template.php— только HTML и вывод$arResult -
result_modifier.php— подготовка данных, дополнительные выборки, форматирование -
component_epilog.php— код, который выполняется после кэширования (счётчики, формы) -
style.cssиscript.js— подключаются автоматически через\Bitrix\Main\Page\Asset -
.parameters.php— параметры для настройки из визуального редактора
CSS и JS подключаем через Asset::getInstance()->addCss() и addJs(). Не через <link> в шаблоне — иначе ломается объединение файлов и кэширование.
Кэширование — критично для highload
Компонентное кэширование в Битрикс — мощная штука, но её легко сломать. Типичная ошибка: вывели имя пользователя внутри кэшированного компонента каталога — и все видят одно имя. Решение: component_epilog.php для динамических вставок, которые не должны кэшироваться.
Tagged cache ($this->setResultCacheKeys, CIBlock::clearIblockTagCache) — обязательно настраиваем. Изменили товар в админке — кэш именно этого товара сбрасывается автоматически, без сброса всего.
Типовые шаблоны
-
Каталог —
catalog.sectionиcatalog.elementс переключением вида (плитка/список/таблица). Lazy load для изображений,srcsetдля ретины -
Корзина —
sale.basket.basketс AJAX-обновлением без перезагрузки страницы. Мини-корзина в шапке черезsale.basket.basket.line -
Мегаменю —
menuс кэшированием по разделам и отложенной загрузкой подменю -
Поиск —
search.titleс автоподсказками, дебаунс 300мс, превью товаров в дропдауне -
Хлебные крошки —
breadcrumbс микроразметкой BreadcrumbList по Schema.org
Кастомизация шаблонов Маркетплейса
Купленное готовое решение — отправная точка, не финал. Что обычно переделываем:
- Выносим инлайн-стили в отдельные файлы — в штатных шаблонах любят засовывать CSS прямо в HTML
- Убираем неиспользуемый JS — типовые решения тянут jQuery-плагины на 200+ КБ, из которых используется один слайдер
- Перерабатываем
result_modifier.php— часто там избыточные запросы к базе, которые уже есть в$arResult - Адаптируем дизайн без потери обновляемости — кастомизируем копию шаблона, оригинал не трогаем
CSS: BEM, Tailwind или гибрид
BEM — предсказуемость для больших проектов
На проектах с десятками шаблонов компонентов BEM — спасение. .product-card, .product-card__price, .product-card--featured. Стили изолированы, конфликтов нет, новый разработчик читает классы и понимает структуру без документации.
Специфика Битрикса: компоненты генерируют обёртки с классами вида bx-component. Не боремся с ними — оборачиваем свой BEM-блок внутри.
Tailwind — скорость на типовых задачах
Для проектов, где скорость разработки приоритетнее долгосрочной поддержки. PurgeCSS (встроен в Tailwind 3+) вырезает неиспользуемое — итоговый CSS 10-30 КБ вместо сотен. Конфигурация дизайн-токенов через tailwind.config.js: цвета, шрифты, отступы зафиксированы в одном месте.
Гибрид — чаще всего берём именно его
BEM для структурных компонентов (каталог, карточка товара, чекаут), Tailwind для утилитарных вещей (отступы, flex-раскладки, цвета текста). Работает, когда команда договорилась о границе.
Производительность фронтенда — Core Web Vitals
Critical CSS — LCP под контролем
Выделяем стили первого экрана через critical (npm-пакет), инлайним в <head>. Остальное грузится асинхронно через media="print" onload="this.media='all'". Разница в LCP — секунда-полторы на мобильных.
Изображения — главный источник тормозов
- WebP через
<picture>с JPEG-фоллбэком. AVIF — если аудитория на свежих браузерах -
loading="lazy"для всего ниже первого экрана -
widthиheightпрописаны явно — CLS = 0, макет не прыгает - Конвертация на лету: обработчик в
urlrewrite.phpдля автоматической генерации WebP из загруженных изображений
Минификация и сжатие
- CSS и JS через Vite или встроенное объединение Битрикс (
Настройки → Главный модуль → Оптимизация CSS) - Brotli на nginx (
brotli_comp_level 6) — на 15-20% эффективнее gzip - Кэширование статики:
expires 1y+ версионирование через query string или hash в имени файла
Адаптивная вёрстка — mobile-first
Базовые стили — для мобильных (320px+). Десктопные добавляем через @media (min-width: 1024px). Не наоборот.
| Breakpoint | Диапазон | Что адаптируем |
|---|---|---|
| Мобильные | 320-639px | Одноколоночная сетка, увеличенные touch-зоны (минимум 44x44px) |
| Планшеты | 640-1023px | Двухколоночная сетка, адаптированная навигация |
| Десктоп | 1024-1439px | Полная сетка, сайдбары, мегаменю |
| Широкие экраны | 1440px+ | max-width на контейнере, увеличенные отступы |
Ретина: SVG для иконок (прогоняем через SVGO — минус 30-50% размера), srcset с 2x для растровых изображений.
Доступность и кроссбраузерность
ARIA-атрибуты для интерактивных элементов: role="dialog" на модалках, aria-expanded на аккордеонах, aria-label на иконочных кнопках. Навигация табом, контрастность по WCAG 2.1 AA.
Поддерживаем: Chrome, Firefox, Safari, Edge — последние 2 версии. Safari iOS 15+, Chrome Android 10+, Yandex Browser. Для остального — graceful degradation: всё работает, но без анимаций и теней.
Сроки
| Объём | Срок |
|---|---|
| Лендинг (5-7 экранов) | 3-5 дней |
| Корпоративный сайт (15-20 уникальных страниц) | 2-4 недели |
| Интернет-магазин (30+ шаблонов компонентов) | 4-8 недель |
| Кастомизация готового решения Маркетплейса | 1-3 недели |
| Редизайн существующего проекта | 3-6 недель |
После анализа макетов даём разбивку по компонентам и страницам — с указанием, что переиспользуется, а что верстается с нуля.