На главную

Mode-State-View (MSV)

Описание

Mode-State-View (MSV)

Паттерн разработки стилей компонентов UI с помощью препроцессоров, таких как Sass, Less и Stylus.

Определения

В основе паттерна лежат принципы реального мира. Основными терминами являются:

  • View / Представление — набор стилей характеризующих сущность пользовательского интерфейса (в определённом Состоянии);
  • State / Состояние — условия влияющие на Представление;
  • Mode / Режим — множество Состояний одной сущности.

Компонент интерфейса может иметь несколько состояний: зелёная кнопка может быть нажата и отжата. Компонент интерфейса может иметь несколько наборов состояний: кнопка может быть не только зелёная, но и голубая, и обе они могут быть как нажаты, так и отжаты.

Пример

В интерфейсе кнопка имеет несколько состояний: link — в ожидании действия пользователя, hover — пользователь навёл указатель мыши на кнопку, active — пользователь зажал левую клавишу мыши над кнопкой. Кнопка может быть синей и зелёной.

alt text

В данном примере обе кнопки (голубая и зелёная) представлены в трёх состояниях. Для каждой из кнопок набор состояний идентичен. Набор состояний образует некоторый режим.

alt text

Подробная информация доступна в статье «Режимы и состояния в SCSS».