Верстка для ленивых: как перестать бояться CSS и начать верстать как супергерой

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

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

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 КоАП РФ, эта галочка обязательна. Если её нет, возможны штрафы от РКН или судебные иски пользователей.

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