Вёрстка макета из Figma на 1С-Битрикс под ключ

Открывается макет в Figma, анализируется: сетка — 12-колоночная или произвольная, размер колонки и gutter; типографика — семейства шрифтов, размеры (H1–H6, body, small, caption), line-height, letter-spacing, weight; цветовая палитра — основные цвета, акцентные, оттенки серого, статусные (success, warning, error); отступы — spacing-система (обычно 4/8/16/24/32/48/64 px); радиусы и тени — border-radius (4, 8, 12, 16 px), box-shadow; адаптивные варианты — есть ли в макете отдельные фреймы для mobile / tablet / desktop.

Верстается семантическая HTML5-разметка: header, main, section, article, nav, footer. Заголовки используются строго по иерархии (H1 — один на страницу). Списки — через ul/ol/li. Формы — через form, fieldset, label, input с правильными type. Для интерактивных не-кнопочных элементов используется button (не div).

Используется методология BEM (Блок–Элемент–Модификатор): классы вида .card, .card__title, .card--highlighted. CSS организуется по файлам: base.scss (переменные, сброс, типографика), components.scss (кнопки, карточки, формы), layout.scss (хедер, футер, сетка), pages.scss (странично-специфичные стили). Переменные выносятся в CSS custom properties (--color-primary, --spacing-md).

Раскладки реализуются современными CSS-модулями: Flexbox — для одномерных раскладок (меню, ряд карточек, форма с лейблом и полем); CSS Grid — для двумерных раскладок (сетка каталога 3×4, layout страницы grid-template-areas); gap вместо margin для равномерных отступов между элементами сетки; aspect-ratio для пропорциональных изображений без padding-bottom-хаков.

Вёрстка сверяется с макетом через плагин PerfectPixel (расширение Chrome) — макет Figma накладывается на страницу с прозрачностью 50%, подгоняются отступы, размеры, шрифты до совпадения. Шрифты подключаются локально (через @font-face) или через @fontsource CDN. Проверяется рендеринг шрифтов через -webkit-font-smoothing: antialiased.

Реализуются на ванильном JavaScript (без jQuery): слайдер — через CSS scroll-snap-type и scroll-snap-align; аккордеон — через details/summary (нативный HTML) или кастомный на JS с ARIA; модальные окна — через dialog (нативный HTML) или кастомный с role="dialog", aria-modal="true", фокус-ловушкой; табы — через role="tablist", role="tab", aria-selected; анимации при скролле — через Intersection Observer API.

Вёрстка интегрируется в шаблон сайта Битрикс: HTML-разметка переносится в header.php и footer.php; CSS подключается через CMain::initPageResources() или $APPLICATION->SetAdditionalCSS(); JS подключается через $APPLICATION->AddHeadScript(); динамические блоки (меню, каталог, новости) заменяются компонентами: bitrix:menu, bitrix:catalog.section, bitrix:news.list; редактируемые зоны помечаются тегами $APPLICATION->IncludeComponent("bitrix:main.include") с EDIT_TEMPLATE.

Тестируется в: Chrome (Windows, macOS, Android), Firefox, Safari (macOS, iOS), Edge. Для Safari/iOS — учитываются особенности: overflow: auto требует -webkit-overflow-scrolling: touch для плавной прокрутки, position: sticky работает иначе внутри overflow-контейнеров, backdrop-filter требует -webkit- префикс. Для старых браузеров (IE11 не поддерживается) используется autoprefixer с настройкой > 0.5%, last 2 versions, not dead.

HTML — минифицируется (убираются пробелы, комментарии); CSS — объединяется и минифицируется через PostCSS + cssnano, удаляется неиспользуемый CSS через PurgeCSS; JS — объединяется и минифицируется через Terser, неиспользуемый код удаляется через tree-shaking. Итоговый bundle проверяется через Webpack Bundle Analyzer или source-map-explorer.