Вы утвердили дизайн. Клиент в восторге. Осталось «просто» сверстать. И тут начинается самое интересное: оттенки не совпадают, отступы плывут, на мобильных всё разваливается. Знакомая картина? Разработка сайта по макету — это не механический перенос картинок в код, а инженерная задача. Заказчик видит разницу, и если она есть — теряет доверие. Как сделать так, чтобы сайт выглядел ровно как в Figma, работал быстро и не ломался на каждом втором экране? Давайте разберём процесс по косточкам.

Начинаем не с кода, а с анализа макета

Ошибка новичка — открыть Figma и сразу начать верстать первый экран. Профессионал сначала изучает макет целиком. Выявите все повторяющиеся блоки, состояния кнопок (hover, active, disabled), мобильные версии. Если чего-то нет — составьте список вопросов дизайнеру. Потратьте час на анализ, чтобы потом не переделывать неделями.

Что извлечь из макета перед стартом

Из хорошего макета можно вытащить готовую дизайн-систему. Зафиксируйте её в коде сразу — это сэкономит время. Вот ключевые параметры, которые стоит перенести в переменные или миксины:

Элемент дизайн-системы	Что извлекаем	Как используем в коде
Цветовая палитра	Основные, акцентные, фоновые цвета и их оттенки	CSS-переменные (custom properties)
Типографика	Шрифты, размеры, высота строк, межбуквенные интервалы	Глобальные стили для h1–h6, p, миксины SCSS
Сетка	Ширина контейнера, количество колонок, отступы (гаттеры)	CSS Grid или Flexbox с заданными gap
Отступы и интервалы	Системные значения margin/padding (4px, 8px, 16px, 24px…)	Переменные — например, --space-sm, --space-md
Тени и эффекты	Параметры box-shadow, фильтры, градиенты	Переменные для box-shadow, background

Разработка сайта по макету начинается не в редакторе кода, а в голове. Декомпозиция макета — половина успеха.

Инструменты, которые держат принцип pixel-perfect

Вы можете писать CSS годами, но без правильных инструментов добиться точного соответствия макету почти невозможно. Вот наш джентльменский набор для профессиональной разработки сайта по макету.

Редактор и расширения

Visual Studio Code — стандарт индустрии. Установите Live Server для горячей перезагрузки и EditorConfig, чтобы вся команда писала в едином стиле. Обязательно подключите плагин для подсветки CSS-переменных и авто-дополнения классов.

Наложение макета на свёрстанную страницу

Расширение PerfectPixel (или PixelPerfect) позволяет наложить скриншот макета поверх вашей вёрстки в браузере. Выставляете прозрачность 50% и видите каждое расхождение: заголовок съехал на 2 пикселя, кнопка слишком узкая. Доводите до полного совпадения — и клиент получает именно то, что утверждал.

Препроцессоры и сборщики

SCSS или LESS — обязательны для серьёзного проекта. Переменные, миксины, вложенность — это не роскошь, а необходимость, чтобы поддерживать код в порядке после того, как сайт уйдёт в продакшн. Из сборщиков Vite сейчас быстрее и проще, чем Webpack, но если проект сложный — Webpack даёт больше контроля. Главное — настроить автопрефиксер, чтобы CSS работал во всех современных браузерах.

Методологии: БЭМ, компоненты и Mobile First

Когда в проекте больше 10 страниц, хаотичные названия классов убивают всё время на поддержку. Разработка сайта по макету должна быть масштабируемой. Три подхода, которые работают:

Компонентный подход. Разбейте интерфейс на независимые блоки (карточка товара, шапка, форма). Каждый блок — отдельный файл SCSS или CSS-класс, который можно переиспользовать. Это ускоряет и верстку, и будущие правки.

БЭМ (Блок-Элемент-Модификатор). Даёт строгую систему именования классов. Например, .card, .card__title, .card--featured. Код становится читаемым, легко находить и менять стили, не боясь сломать что-то ещё.

Mobile First. Начинайте верстать с самого узкого экрана (320px). Затем добавляйте медиазапросы для планшетов и десктопов. Это заставляет продумывать контент в условиях жестких ограничений, и десктопная версия получается чище и быстрее.

---

Адаптивность — не роскошь, а требование

70% трафика на многих сайтах идёт с мобильных. Если на телефоне кнопка наползает на текст или меню не открывается — пользователь уходит. Разработка сайта по макету обязана включать адаптивную верстку с самого начала, а не как этап «допилить потом».

Используйте относительные единицы (%, vw, rem) вместо фиксированных пикселов для ширины и размеров шрифта. CSS Grid отлично справляется с перестройкой колонок: на мобильных одна колонка, на десктопе — три. Все изображения делайте резиновыми через max-width: 100%; height: auto. И обязательно проверяйте на реальных устройствах, а не только в эмуляторе Chrome.

Финальный чеклист: что проверить перед сдачей

Вы закончили верстку. Не отправляйте заказчику сразу. Пройдитесь по списку:

• Pixel-perfect наложение макета на браузер — нет смещений больше 1-2px.
• Адаптив на трёх контрольных точках: 320px, 768px, 1280px.
• Семантика HTML5 (header, main, section, article, footer) — это влияет на SEO.
• Скорость загрузки: сожмите изображения через TinyPNG, используйте формат WebP, отложите не критичный JS.
• Кроссбраузерность: Chrome, Firefox, Safari, Edge (хотя бы последние версии).

Если всё ок — можно отдавать в продакшн. Если нет — возвращайтесь на шаг с PerfectPixel.