Режимы И Состояния В Scss



Режимы и состояния в SCSS

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

Рассмотрим использование данного подхода при работе с препроцессорами стилей.

Будьте осторожны, в этой статье слишком много примеров кода.

Концепция Компонент интерфейса может иметь несколько состояний: зеленую кнопку можно нажимать и отпускать.

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

Каждое состояние кнопки имеет соответствующий дизайн.

Проектирование компонента интерфейса может повторяться в разных состояниях одного и того же режима и в разных режимах.

Количество состояний режима зависит от конкретного режима.



Режимы и состояния в SCSS

Таким образом, можно согласиться с тем, что

Вид — набор стилей, характеризующих суть пользовательского интерфейса (в определенном состоянии); Состояние — условия, влияющие на Презентацию; Режим — совокупность состояний одного субъекта.

Роль объекта Mode — компонент интерфейса не ниже уровня Block с точки зрения BЭM. Два режима не могут иметь представления с одинаковыми свойствами.

Если режимы влияют на одни и те же свойства, объедините их.

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

Кнопка может быть синего или зеленого цвета.



Режимы и состояния в SCSS

В этом примере обе кнопки (синяя и зеленая) представлены в трех состояниях.

Для каждой кнопки набор состояний идентичен.

Совокупность государств образует определенный режим.



Режимы и состояния в SCSS

Я оформляю кнопки следующим образом:

   

// set modes @each $skinName, $skinColor in (

Теги: #организация кода #CSS #scss #OOSCSS #препроцессоры #разработка веб-сайтов #CSS
Вместе с данным постом часто просматривают:

Автор Статьи


Зарегистрирован: 2019-12-10 15:07:06
Баллов опыта: 0
Всего постов на сайте: 0
Всего комментарий на сайте: 0
Dima Manisha

Dima Manisha

Эксперт Wmlog. Профессиональный веб-мастер, SEO-специалист, дизайнер, маркетолог и интернет-предприниматель.