Развалившийся макет, сломанные кнопки и тестировщик, отправляющий бесконечные баг-репорты... Знакомая боль? Верстка может быть не кошмаром, а крепостью, если подойти к ней с умом. Собрали проверенные принципы, которые помогут вам делать гибкую и устойчивую верстку, способную пережить любые изменения контента и дизайна.

Дарья Владыко

Frontend-разработчик, Red Collar

Основы гибкой верстки

  • Не задавайте фиксированную высоту текстовым блокам, так как текст может измениться в любой момент. Продумайте вариант, в котором может быть не один абзац, а несколько, или, например, список с ссылками внутри.

  • Используйте object-fit: cover или aspect-ratio для изображений, так как картинки могут поменяться (например, вместо вертикального изображения контент-менеджер может загрузить горизонтальное или квадратное).

  • Соблюдайте единые отступы между секциями, так как они могут меняться местами, удаляться или добавляться новые. Это также поможет при работе с якорями.

  • Создавайте переиспользуемые компоненты — не нужно верстать свою кнопку для каждого блока. В идеале перед началом работы собрать storybook или небольшой UI-кит, в котором будут видны все компоненты и их варианты.

  • Работайте с единым контейнером через миксины — это позволит в адаптиве менять размер контейнера в одном месте. Следите за колонками: дизайнеры чаще всего используют сетку на 12 колонок (в Figma их можно увидеть, нажав Shift + G). Для колонок не задавайте ширину в px, используйте calc(100% / 12 * N), где N — количество колонок.

Семантика и доступность

  • Используйте только один h1 на странице.

  • Применяйте семантические теги (header, nav, section, article, footer) — это не только улучшит организацию кода, но и повысит доступность сайта для пользователей и поисковых систем.

  • Для кликабельных элементов используйте a или button, а не div или input type="button". Это важно как для доступности, так и для SEO.

  • Открывайте внешние ссылки в новом окне через target="_blank", но не забудьте добавить rel="noopener noreferrer", чтобы избежать уязвимостей.

Оптимизация и анимации

  • Используйте transform и opacity вместо top, width, display: none — это поможет избежать лишней перерисовки и повысит производительность.

  • Применяйте will-change точечно для оптимизации анимаций, а также translateZ(0) для включения GPU-ускорения.

  • Используйте IntersectionObserver и ResizeObserver — анимации, которые продолжают работать за пределами экрана, потребляют ресурсы впустую.

  • Для изображений ниже первого экрана добавьте loading="lazy".

  • Оптимизируйте изображения: используйте ретину (2x), форматы webp и avif, прогоняйте их через svgomg и squoosh.

  • Для видео не забудьте poster и сжатие через youcompress.

  • Избегайте transition: all — пропишите свойства отдельно. Если нужен интересный easing, загляните на easings.net.

  • Применяйте requestAnimationFrame для плавных анимаций — это синхронизирует их с FPS экрана, делая их плавнее и снижая нагрузку. Это отличная альтернатива setTimeout.

  • Используйте svg-спрайты, а не PNG или JPG — иконки будут легче, не потеряют качество на ретине и упростят работу.

Финальная проверка

  • Проверьте, что верстка корректно реагирует на resize. Иногда нужен debounce, иногда что-то не срабатывает при повороте телефона.

  • Убедитесь, что нет горизонтального скролла (особенно на мобильных устройствах и планшетах).

  • Очищайте обработчики событий. У всех addEventListener есть removeEventListener, у всех setTimeout есть clearTimeout, у всех конструкторов есть деструктор.

  • Тестируйте верстку на реальных данных, особенно после подключения клиентской админки. Вместо ожидаемого текста может прийти null/undefined, а также спецсимволы (&shy, &nbsp).

  • Проверьте ссылки на политику конфиденциальности, соцсети и контакты. Если их нет — запросите у менеджера или клиента.

  • Заполните head: title, description, og-теги, фавикон.

  • Проверяйте формы: корректность масок, обязательные поля, наличие галочки «Согласен с политикой конфиденциальности» и ссылку на нее. С 2017 года, согласно статье 13.11 КоАП РФ, эта галочка обязательна. Если её нет, возможны штрафы от РКН или судебные иски пользователей.

Гибкая и устойчивая верстка — это не магия, а набор простых принципов, которые экономят время и нервы. Чем раньше вы начнете их применять, тем меньше вас будут пугать внезапные правки дизайнера, ошибки контент-менеджера и сюрпризы из админки.