Яндекс

БЭМ: Разработка под несколько платформ

БЭМ

Сергей Бережной,
руководитель отдела
разработки поисковых интерфейсов

БЭМ

Для тех, кто ничего не знает про БЭМ

БЭМ

Кроме блоков, элементов и модификаторов, есть ещё части…

bem.info/method/definitions

Разработка для нескольких платформ

«Несколько платформ»

Desktop
Touch Pad
Touch Phone

Разработка для нескольких платформ

Native
Adaptive

Нативная разработка

Плюсы:

пользовательский опыт близок к опыту с операционной системой
можно учитывать особенности платформы (очень хорошо учитывать)
сложные вещи работают быстро
…

Нативная разработка

Минусы:

дорого: разработка под iOS, Android и Windows Phone требует в три раза больше сил

Адаптивный дизайн

Плюсы:

дешевле: один раз делаем — работает везде

Адаптивный дизайн

Минусы:

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

«Золотая середина»

Плюсы:

дёшево: используем общие части между разными платформами
проще: не надо заставлять один код быть сильно полиморфным
индивидуально для платформы

«Золотая середина»

Минусы:

web-технологии…

БЭМ

Переопределения

CSS

.button {
    border: 1px solid #666;
    font-size: 13px;
}

Переопределения

Можем разложить на части:

общее для всех платформ

.button {
    border: 1px solid #666;
}

специфичное для конкретной платформы

.button {
    font-size: 13px;
}

Уровни переопределения

common
desktop
touch
touch-pad
touch-phone
deskpad?

Уровни переопределения

common.blocks/button/button.css

.button { border: 1px solid #666; }

desktop.blocks/button/button.css

.button { font-size: 13px; }

touch.blocks/button/button.css

.button { font-size: 26px; }

Платформы собираются из уровней переопределения

desktop	touch-pad	touch-phone
common	common	common
desktop	touch	touch
	touch-pad	touch-phone

БЭМ

«Не только CSS»™

Основные понятия: Технология реализации

БЭМ: «Не только CSS»™

Аналогичный декларативный стиль с возможностью точечного переопределения применим для других технологий:

JS
HTML

БЭМ: Разработка для нескольких платформ

Реальные примеры

Заключение

Tl;dr

можно потратить усилия на организацию кода (декларативность, точечные переопределения)…
и программировать под несколько платформ, экономя силы

Контакты

Сергей Бережной

руководитель отдела
разработки поисковых интерфейсов

github.com/veged

veged@yandex-team.ru

@veged

veged