Допустим, наш веб-дизайнер дает нам эту прекрасную работу.

Шаг 0:

  • Убедитесь, что у них также есть дизайн для планшетов и мобильных устройств.
  • Подтвердите действия и анимацию (например, что происходит, когда пользователь нажимает кнопку A, B, C).
  • Сжать JPG до 85
  • Используйте PNG, только если вам действительно нужен прозрачный фон
  • Ленивая загрузка изображений
  • Поддержка экрана сетчатки

Шаг 1:

Определите, сколько сегментов у нас будет.

Красный: сегмент событий.

Зеленый: как использовать сегмент

Синий: сегмент терминов

Черный: сегмент призыва к действию.

Шаг 2:

Создайте Блок и элемент на основе сегментов

Шаг 3.

Реализуйте сегмент за сегментом. Две вещи, которые следует отметить:

  1. Не используйте отображение или позиционирование в Block
  2. Не вставляйте свой код слишком глубоко
  3. Первый отступ только для Media Query, Element и Block-Modifier
  4. Второй отступ только для Media Query и модификатора элемента
  5. Обратите внимание на порядок записи (Media Query, Modifier, затем Element)

Шаг 4 (необязательно):

Поскольку мы знаем, что кнопка в сегменте CTA будет использоваться повторно (например, внутри сегмента Event), мы должны извлечь этот Элемент и сделать его новым Блоком.

Пожалуйста, имейте в виду, что вы не должны делать этот шаг, если никто не собирается его использовать, просто добавляя ненужную работу и бесполезность.