На главную

Module-Block-Element (MoBE)

Описание

Module-Block-Element (MoBE)

Методология семантической разработки пользовательских интерфейсов основанная на БЭМ. Принципы MoBE ложатся «поверх» BEM, расширяя её понятием Module.

Определения

Согласно MoBE, критерием разделения компонентов UI на типы является функциональный признак:

  • Module — Компонент интерфейса комплексно решающий задачу пользователя за счёт имеющегося функционала. Модуль состоит из Блоков и Элементов. Модуль не может включать другие Модули.
  • Block — Компонент интерфейса, реализующий часть функционала Модуля. Блок состоит из Элементов. Блок может включать другие Блоки. Экземпляры Блока могут повторяться.
  • Element — Компонент интерфейса, DOM-элемент. Является составной частью компонентов интерфейса других типов.

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

alt text

Блок несет в себе функционал необходимый пользователю для решения конкретной пользовательской задачи в рамках Модуля.

Блок, и его набор функциональности, сам по себе не нужен пользователю или недостаточен для полноценного взаимодействия пользователя с интерфейсом.

И Элемент, сам по себе, в отрыве от Блока и Модуля, не нужен пользователю. Элемент — это атомарный DOM-элемент, лишённый всякого функционала полезного пользователю.

Сравнение с БЭМ

Знакомая нам картинка из документации БЭМ принимает вид:

alt text

Шапка сайта, сама по себе, не обладает какой-либо функциональностью, функционалом обладают Блоки внутри неё.

Подробная информация доступна в статье «MoBE — почти БЭМ».