Верстка — это ключевой этап создания веб-проекта‚ на котором статичный дизайн-макет превращается в интерактивный‚ работающий в браузере код. Качество верстки напрямую влияет на скорость загрузки‚ позиции в поисковой выдаче (SEO)‚ удобство использования (UX) и возможность дальнейшего масштабирования проекта. В этом руководстве мы разберем полный цикл работы: от подготовки и выбора инструментов до адаптивной верстки и передачи проекта заказчику или бэкенд-разработчикам.
Подготовительный этап: фундамент успешного проекта
Прежде чем написать первую строку кода‚ необходимо провести глубокую аналитическую работу. Ошибки на этом этапе стоят в десятки раз дороже‚ чем на стадии программирования.
Брифинг и сбор требований
Встреча с заказчиком (брифинг) позволяет понять бизнес-задачи сайта. Ключевые вопросы:
- Цель сайта: продажи (лендинг‚ интернет-магазин)‚ имидж (корпоративный сайт‚ портфолио)‚ информирование (блог‚ новостной портал)‚ генерация лидов.
- Целевая аудитория: кто посетит сайт‚ с каких устройств‚ какой уровень технической грамотности.
- Функционал: нужны ли личные кабинеты‚ каталоги‚ фильтры‚ калькуляторы‚ интеграции с CRM/1С‚ платежные системы.
- CMS (Система управления контентом): WordPress‚ Bitrix‚ ModX‚ OctoberCMS‚ самописная или headless-решение. От выбора CMS зависят требования к верстке (иерархия шаблонов‚ нейминг классов‚ ограничения визуальных редакторов).
- Планируемые обновления: будет ли контент меняться часто (нужен удобный админ-интерфейс‚ блоки-конструкторы) или сайт статичен.
Анализ конкурентов и референсов
Изучение лучших практик в нише помогает сформировать понимание современных стандартов UX/UI‚ избежать чужых ошибок и найти уникальные фишки для проекта.
Прототипирование (Wireframing)
Создание низко- и высокодетализированных прототипов (в Figma‚ Miro‚ Axure) позволяет согласовать структуру страниц‚ пользовательские сценарии (User Flow) и расположение контентных блоков до начала дизайна. Это экономит время на правках верстки в будущем.
Дизайн-система и UI-Kit
На этапе дизайна (обычно в Figma) формируется библиотека компонентов:
- Типографика (заголовки H1–H6‚ body text‚ caption‚ ссылки‚ состояния наведения/фокуса).
- Цветовая палитра (Primary‚ Secondary‚ Accent‚ Semantic colors: Success‚ Error‚ Warning‚ Disabled).
- Сетка (Grid): колонки‚ отступы (gutter)‚ контейнеры‚ брейкпоинты для адаптива.
- UI-компоненты: кнопки‚ инпуты‚ селекты‚ чекбоксы‚ радио‚ модалки‚ табы‚ аккордеоны‚ карточки товаров‚ хлебные крошки‚ пагинация и их состояния (default‚ hover‚ active‚ focus‚ disabled‚ error).
- Иконки и иллюстрации (SVG-спрайты или отдельные файлы).
Важно: Верстальщик должен быть включен в процесс ревью дизайн-макетов (Design Review) до утверждения заказчиком‚ чтобы отсечь технически нереализуемые или слишком затратные решения.
Выбор технологического стека и инструментов Подход к разработке - Фреймворки (React‚ Vue‚ Svelte‚ Astro‚ Next.js‚ Nuxt): Компонентный подход‚ SSR/SSG/ISR для SEO и скорости‚ переиспользование логики. Стандарт для сложных веб-приложений‚ крупных каталогов‚ личных кабинетов.
- No-code / Low-code (Tilda‚ Webflow‚ Readymag‚ Framer): Быстрый запуск MVP‚ простых лендингов‚ блогов‚ портфолио. Ограничения в уникальной анимации‚ сложной логике‚ SEO-гибкости‚ экспорте кода (кроме Webflow). Хороший вариант‚ если клиент сам будет управлять контентом без программистов.
Инструментарий верстальщика (Must Have) - Редактор кода: VS Code (расширения: Live Server‚ Prettier‚ ESLint‚ Stylelint‚ Auto Rename Tag‚ CSS Peak).
- Система контроля версий: Git (GitHub / GitLab / Bitbucket). Ветвление: Git Flow или Trunk Based Development.
- Сборщики (Bundlers): Vite (современный стандарт)‚ Webpack (legacy/enterprise)‚ Gulp (простые статичные проекты). Задачи: транспиляция (Babel/SWC)‚ минификация‚ оптимизация изображений (WebP/AVIF)‚ генерация спрайтов‚ автопрефиксер.
- Препроцессоры / PostCSS: SCSS (вложенность‚ переменные‚ миксины) + PostCSS (autoprefixer‚ cssnano‚ postcss-preset-env).
- Линтеры и форматтеры: ESLint (JS/TS)‚ Stylelint (CSS/SCSS)‚ Prettier. Настройка
husky + lint-staged для pre-commit хуков; - Методологии именования: БЭМ (Block Element Modifier), де-факто стандарт в РФ/СНГ для поддержания порядка в CSS. Альтернативы: SMACSS‚ ITCSS‚ CSS Modules‚ Tailwind CSS (utility-first).
Процесс верстки: пошаговый алгоритм Настройка окружения и архитектура проекта project-root/
├── src/
│ ├── assets/ # Шрифты‚ иконки‚ фото (исходники)
│ ├── components/ # Переиспользуемые блоки (header‚ footer‚ button‚ card)
│ ├── pages/ # Страницы (index‚ about‚ catalog‚ product)
│ ├── styles/
│ │ ├── base/ # reset‚ variables‚ typography‚ mixins
│ │ ├── layout/ # header‚ footer‚ grid‚ container
│ │ ├── components/ # Стили конкретных блоков
│ │ ├── utils/ # helpers‚ visually-hidden‚ clearfix
│ │ └── main.scss # Точка входа стилей
│ ├── scripts/
│ │ ├── modules/ # Логика компонентов (slider‚ modal‚ form)
│ │ ├── utils/ # Хелперы (debounce‚ throttle‚ fetch-wrapper)
│ │ └── main.js # Точка входа скриптов
│ └── templates/ # Pug / Twig / Nunjucks шаблоны (если используется)
├── public/ # Статика‚ копируемая без обработки (favicon‚ robots.txt)
├── .gitignore
├── package.json
├── vite.config.js # Конфиг сборщика
└── README.md
- Фреймворки (React‚ Vue‚ Svelte‚ Astro‚ Next.js‚ Nuxt): Компонентный подход‚ SSR/SSG/ISR для SEO и скорости‚ переиспользование логики. Стандарт для сложных веб-приложений‚ крупных каталогов‚ личных кабинетов.
- No-code / Low-code (Tilda‚ Webflow‚ Readymag‚ Framer): Быстрый запуск MVP‚ простых лендингов‚ блогов‚ портфолио. Ограничения в уникальной анимации‚ сложной логике‚ SEO-гибкости‚ экспорте кода (кроме Webflow). Хороший вариант‚ если клиент сам будет управлять контентом без программистов.
Инструментарий верстальщика (Must Have) - Редактор кода: VS Code (расширения: Live Server‚ Prettier‚ ESLint‚ Stylelint‚ Auto Rename Tag‚ CSS Peak).
- Система контроля версий: Git (GitHub / GitLab / Bitbucket). Ветвление: Git Flow или Trunk Based Development.
- Сборщики (Bundlers): Vite (современный стандарт)‚ Webpack (legacy/enterprise)‚ Gulp (простые статичные проекты). Задачи: транспиляция (Babel/SWC)‚ минификация‚ оптимизация изображений (WebP/AVIF)‚ генерация спрайтов‚ автопрефиксер.
- Препроцессоры / PostCSS: SCSS (вложенность‚ переменные‚ миксины) + PostCSS (autoprefixer‚ cssnano‚ postcss-preset-env).
- Линтеры и форматтеры: ESLint (JS/TS)‚ Stylelint (CSS/SCSS)‚ Prettier. Настройка
husky + lint-staged для pre-commit хуков; - Методологии именования: БЭМ (Block Element Modifier), де-факто стандарт в РФ/СНГ для поддержания порядка в CSS. Альтернативы: SMACSS‚ ITCSS‚ CSS Modules‚ Tailwind CSS (utility-first).
Процесс верстки: пошаговый алгоритм Настройка окружения и архитектура проекта project-root/
├── src/
│ ├── assets/ # Шрифты‚ иконки‚ фото (исходники)
│ ├── components/ # Переиспользуемые блоки (header‚ footer‚ button‚ card)
│ ├── pages/ # Страницы (index‚ about‚ catalog‚ product)
│ ├── styles/
│ │ ├── base/ # reset‚ variables‚ typography‚ mixins
│ │ ├── layout/ # header‚ footer‚ grid‚ container
│ │ ├── components/ # Стили конкретных блоков
│ │ ├── utils/ # helpers‚ visually-hidden‚ clearfix
│ │ └── main.scss # Точка входа стилей
│ ├── scripts/
│ │ ├── modules/ # Логика компонентов (slider‚ modal‚ form)
│ │ ├── utils/ # Хелперы (debounce‚ throttle‚ fetch-wrapper)
│ │ └── main.js # Точка входа скриптов
│ └── templates/ # Pug / Twig / Nunjucks шаблоны (если используется)
├── public/ # Статика‚ копируемая без обработки (favicon‚ robots.txt)
├── .gitignore
├── package.json
├── vite.config.js # Конфиг сборщика
└── README.md
husky + lint-staged для pre-commit хуков;Настройка окружения и архитектура проекта project-root/
├── src/
│ ├── assets/ # Шрифты‚ иконки‚ фото (исходники)
│ ├── components/ # Переиспользуемые блоки (header‚ footer‚ button‚ card)
│ ├── pages/ # Страницы (index‚ about‚ catalog‚ product)
│ ├── styles/
│ │ ├── base/ # reset‚ variables‚ typography‚ mixins
│ │ ├── layout/ # header‚ footer‚ grid‚ container
│ │ ├── components/ # Стили конкретных блоков
│ │ ├── utils/ # helpers‚ visually-hidden‚ clearfix
│ │ └── main.scss # Точка входа стилей
│ ├── scripts/
│ │ ├── modules/ # Логика компонентов (slider‚ modal‚ form)
│ │ ├── utils/ # Хелперы (debounce‚ throttle‚ fetch-wrapper)
│ │ └── main.js # Точка входа скриптов
│ └── templates/ # Pug / Twig / Nunjucks шаблоны (если используется)
├── public/ # Статика‚ копируемая без обработки (favicon‚ robots.txt)
├── .gitignore
├── package.json
├── vite.config.js # Конфиг сборщика
└── README.md
project-root/
├── src/
│ ├── assets/ # Шрифты‚ иконки‚ фото (исходники)
│ ├── components/ # Переиспользуемые блоки (header‚ footer‚ button‚ card)
│ ├── pages/ # Страницы (index‚ about‚ catalog‚ product)
│ ├── styles/
│ │ ├── base/ # reset‚ variables‚ typography‚ mixins
│ │ ├── layout/ # header‚ footer‚ grid‚ container
│ │ ├── components/ # Стили конкретных блоков
│ │ ├── utils/ # helpers‚ visually-hidden‚ clearfix
│ │ └── main.scss # Точка входа стилей
│ ├── scripts/
│ │ ├── modules/ # Логика компонентов (slider‚ modal‚ form)
│ │ ├── utils/ # Хелперы (debounce‚ throttle‚ fetch-wrapper)
│ │ └── main.js # Точка входа скриптов
│ └── templates/ # Pug / Twig / Nunjucks шаблоны (если используется)
├── public/ # Статика‚ копируемая без обработки (favicon‚ robots.txt)
├── .gitignore
├── package.json
├── vite.config.js # Конфиг сборщика
└── README.md
Семантический HTML, это фундамент SEO и доступности для скринридеров.
- Используйте теги по назначению:
<header>‚<footer>‚<main>‚<section>‚<article>‚<aside>‚<nav>. - Иерархия заголовков: строго один
<h1>на странице‚ затем<h2>–<h6>без пропусков уровней. - Формы:
<label>для каждого инпута (черезforили вложенность)‚<fieldset>+<legend>для групп‚ нативная валидация (required‚type="email"‚pattern). - Фокус-менеджмент: видимый
:focus-visibleдля всех интерактивных элементов‚ ловушка фокуса в модалках‚ порядок табуляции (tabindex). - Альтернативный текст для изображений:
alt="Описание сути изображения"(пустойalt=""для декоративных).
CSS-верстка: Современные подходы Сетка и раскладка - CSS Grid: основной инструмент для макро-раскладки (страница‚ карточки каталога‚ сложные асимметричные сетки).
- Flexbox: для микро-раскладки внутри компонентов (выравнивание иконки и текста в кнопке‚ навигация‚ футер).
- Container Queries (@container): современный стандарт для адаптивности компонентов относительно своего контейнера‚ а не вьюпорта.
Адаптивная верстка (Mobile First / Desktop First)
- CSS Grid: основной инструмент для макро-раскладки (страница‚ карточки каталога‚ сложные асимметричные сетки).
- Flexbox: для микро-раскладки внутри компонентов (выравнивание иконки и текста в кнопке‚ навигация‚ футер).
- Container Queries (@container): современный стандарт для адаптивности компонентов относительно своего контейнера‚ а не вьюпорта.
Адаптивная верстка (Mobile First / Desktop First)
Рекомендуется подход Mobile First (стили для мобильных по умолчанию‚ медиа-запросы min-width для расширения).
- Брейкпоинты: задаются в дизайн-системе (обычно: 320/375‚ 768‚ 1024‚ 1440‚ 1920px). Используйте CSS-переменные для брейкпоинтов.
- Резиновая типографика:
clamp(min‚ preferred‚ max)для заголовков и текста плавного масштабирования без медиа-запросов. - Относительные единицы:
rem(от root font-size) для шрифтов и отступов‚emдля внутренних отступов компонентов‚%‚vw/vh‚dvh/svh/lvh(динамические viewport units) для полноэкранных секций. - Изображения:
<picture>+<source type="image/avif">+<source type="image/webp">+<img>. Атрибутыsrcset(x-дескрипторы) иsizesдля арт-дирекшн и переключения разрешения. Ленивая загрузкаloading="lazy"для контента ниже фолда.
Каскад и специфичность - Избегайте
!important и селекторов с высокой специфичностью (ID‚ инлайн-стили). - Используйте БЭМ: низкая специфичность классов (0-1-0)‚ легкость переопределения модификаторами.
- CSS Custom Properties (переменные) для темизации (светлая/темная тема)‚ токенов дизайн-системы;
Анимации и производительность - Анимируйте только
transform и opacity (работают на GPU‚ не вызывают рефлоу/репейнт). - Используйте
will-change осмотрительно. - Сложные анимации — через Web Animations API или GSAP (если в проекте есть бюджет на вес библиотеки).
- Уважайте
@media (prefers-reduced-motion: reduce) — отключайте анимации для пользователей‚ запросивших это в ОС.
JavaScript: Прогрессивное улучшение
!important и селекторов с высокой специфичностью (ID‚ инлайн-стили).- Анимируйте только
transformиopacity(работают на GPU‚ не вызывают рефлоу/репейнт). - Используйте
will-changeосмотрительно. - Сложные анимации — через Web Animations API или GSAP (если в проекте есть бюджет на вес библиотеки).
- Уважайте
@media (prefers-reduced-motion: reduce)— отключайте анимации для пользователей‚ запросивших это в ОС.
JavaScript: Прогрессивное улучшение
JS должен улучшать опыт‚ а не быть единственным способом работы интерфейса.
- Декларативный подход: data-атрибуты для инициализации компонентов (
data-slider="main"‚data-modal-trigger="#callback"). - Модульность: ES Modules (import/export). Один файл — одна ответственность.
- Событийная модель: Делегирование событий (event delegation) на динамических списках.
- IntersectionObserver: для ленивой загрузки‚ триггеров анимаций при скролле‚ бесконечного скролла.
- Fetch API / Axios: работа с бэкендом (AJAX-формы‚ фильтры‚ пагинация без перезагрузки). Обработка ошибок‚ состояния загрузки (skeleton loaders / spinners).
- Типизация: TypeScript или JSDoc для автодополнения и поиска багов на этапе разработки.
Кроссбраузерность и тестирование (QA)
Верстка считается готовой только после прохождения чек-листа:
Браузеры и устройства - Десктоп: Chrome (последняя + 1)‚ Firefox‚ Safari (macOS)‚ Edge.
- Мобильные: Safari iOS (последняя + 1)‚ Chrome Android‚ Samsung Internet.
- Тестирование на реальных устройствах (Device Lab) или через BrowserStack / LambdaTest. Эмуляторы DevTools не воспроизводят все баги (скролл‚ клавиатура‚ производительность GPU).
Чек-лист пиксель-перфект / соответствия макету - Сравнение с Figma (плагин PerfectPixel‚ расширения браузера). Допуски: ±1-2px на отступах‚ точное совпадение шрифтов‚ цветов‚ теней‚ border-radius.
- Проверка всех состояний интерактивных элементов (hover‚ focus‚ active‚ disabled‚ error‚ success‚ loading).
- Проверка контента: длинные заголовки (перенос слов
overflow-wrap: break-word / hyphens: auto)‚ отсутствие картинок‚ пустые списки‚ очень длинный текст в карточках.
Валидация и аудиты - CSS Lint / Stylelint: отсутствие ошибок синтаксиса‚ дублей‚ неиспользуемых правил.
- Lighthouse (Chrome DevTools): аудит Performance‚ Accessibility‚ Best Practices‚ SEO. Цель — зеленая зона (90+).
- Web Vitals (Core Web Vitals): LCP (загрузка главного контента) < 2.5с‚ INP (взаимодействие) < 200мс‚ CLS (визуальная стабильность) < 0.1.
Оптимизация производительности (Web Performance) - Critical CSS: инлайн-стили для Above-the-fold контента‚ остальное, асинхронно (
media="print" onload="this.media='all'" или preload). - Шрифты: WOFF2‚
font-display: swap‚ предзагрузка (<link rel="preload" as="font" type="font/woff2" crossorigin>)‚ подсеттинг (subsetting) — только нужные глифы. Локальное хранение (без Google Fonts CDN для GDPR/скорости). - Изображения: AVIF / WebP‚ правильные размеры (не загружать 2000px для контейнера 400px)‚ CDN для отдачи статики.
- JS: Code Splitting (динамический import)‚ Tree Shaking‚ отложенная загрузка некритичных скриптов (
defer‚ type="module"). - Кэширование: правильные заголовки
Cache-Control‚ хэши в именах файлов сборщиком (content hash).
Интеграция с CMS / Бэкендом и передача проекта
- Сравнение с Figma (плагин PerfectPixel‚ расширения браузера). Допуски: ±1-2px на отступах‚ точное совпадение шрифтов‚ цветов‚ теней‚ border-radius.
- Проверка всех состояний интерактивных элементов (hover‚ focus‚ active‚ disabled‚ error‚ success‚ loading).
- Проверка контента: длинные заголовки (перенос слов
overflow-wrap: break-word/hyphens: auto)‚ отсутствие картинок‚ пустые списки‚ очень длинный текст в карточках.
Валидация и аудиты - CSS Lint / Stylelint: отсутствие ошибок синтаксиса‚ дублей‚ неиспользуемых правил.
- Lighthouse (Chrome DevTools): аудит Performance‚ Accessibility‚ Best Practices‚ SEO. Цель — зеленая зона (90+).
- Web Vitals (Core Web Vitals): LCP (загрузка главного контента) < 2.5с‚ INP (взаимодействие) < 200мс‚ CLS (визуальная стабильность) < 0.1.
Оптимизация производительности (Web Performance) - Critical CSS: инлайн-стили для Above-the-fold контента‚ остальное, асинхронно (
media="print" onload="this.media='all'" или preload). - Шрифты: WOFF2‚
font-display: swap‚ предзагрузка (<link rel="preload" as="font" type="font/woff2" crossorigin>)‚ подсеттинг (subsetting) — только нужные глифы. Локальное хранение (без Google Fonts CDN для GDPR/скорости). - Изображения: AVIF / WebP‚ правильные размеры (не загружать 2000px для контейнера 400px)‚ CDN для отдачи статики.
- JS: Code Splitting (динамический import)‚ Tree Shaking‚ отложенная загрузка некритичных скриптов (
defer‚ type="module"). - Кэширование: правильные заголовки
Cache-Control‚ хэши в именах файлов сборщиком (content hash).
Интеграция с CMS / Бэкендом и передача проекта
- Critical CSS: инлайн-стили для Above-the-fold контента‚ остальное, асинхронно (
media="print" onload="this.media='all'"илиpreload). - Шрифты: WOFF2‚
font-display: swap‚ предзагрузка (<link rel="preload" as="font" type="font/woff2" crossorigin>)‚ подсеттинг (subsetting) — только нужные глифы. Локальное хранение (без Google Fonts CDN для GDPR/скорости). - Изображения: AVIF / WebP‚ правильные размеры (не загружать 2000px для контейнера 400px)‚ CDN для отдачи статики.
- JS: Code Splitting (динамический import)‚ Tree Shaking‚ отложенная загрузка некритичных скриптов (
defer‚type="module"). - Кэширование: правильные заголовки
Cache-Control‚ хэши в именах файлов сборщиком (content hash).
Интеграция с CMS / Бэкендом и передача проекта
Это финальный этап‚ определяющий‚ насколько легко заказчик будет управлять сайтом.
Подготовка шаблонов для CMS - Разбивка верстки на шаблоны движка (PHP-шаблоны Bitrix/WordPress‚ Twig для October/Symfony‚ Blade для Laravel);
- Вынос повторяющихся блоков в инклюды/компоненты (header‚ footer‚ breadcrumbs‚ menu).
- Динамические зоны: циклы вывода новостей/товаров‚ пагинация‚ фильтры.
- Редактируемые области: оборачивание контента в классы/атрибуты‚ понятные для визуальных редакторов (например‚
data-editor-block="text" или стандартные классы WP wp-block-*). - Обработка пустых полей: верстка не должна ломаться‚ если заказчик не загрузил картинку или не написал описание (условные конструкции
if в шаблоне).
Документация и гайдлайн для контент-менеджера
data-editor-block="text" или стандартные классы WP wp-block-*).if в шаблоне).Создайте короткий PDF/Notion/Confluence страницу с инструкцией:
- Как создавать страницы/посты.
- Как пользоваться блоками-конструкторами (ACF Flexible Content‚ Gutenberg блоки‚ Bitrix компоненты).
- Требования к изображениям (соотношение сторон‚ макс. вес‚ рекомендуемые размеры).
- Как правильно вставлять ссылки‚ таблицы‚ видео.
Деплой и CI/CD - Настройка пайплайна (GitHub Actions‚ GitLab CI): lint -> test -> build -> deploy (FTP/SSH/RSYNC/Docker/Serverless).
- Окружения: Development (dev-домен)‚ Staging (препрод для приемки заказчиком)‚ Production.
- Роллбэк стратегия (откат на предыдущий билд за 1 клик).
Поддержка и развитие (Post-launch) - Мониторинг ошибок JS: Sentry‚ LogRocket‚ Yandex Metrica / Google Analytics (JS errors tracking).
- Обновление зависимостей (Dependabot / Renovate) для закрытия уязвимостей.
Рефакторинг: по мере роста проекта выделение общих компонентов‚ удаление мертвого кода‚ переход на новые стандарты (например‚ CSS Nesting нативно‚ :has селектор).
- Мониторинг ошибок JS: Sentry‚ LogRocket‚ Yandex Metrica / Google Analytics (JS errors tracking).
- Обновление зависимостей (Dependabot / Renovate) для закрытия уязвимостей.
Рефакторинг: по мере роста проекта выделение общих компонентов‚ удаление мертвого кода‚ переход на новые стандарты (например‚ CSS Nesting нативно‚ :has селектор).
Качественная верстка — это баланс между пиксель-перфект соответствием дизайну‚ технической чистотой кода‚ скоростью работы в браузере пользователя и удобством поддержки разработчиками/контент-менеджерами.