Чтобы все было организовано, UI(пользовательский интерфейс) позволяет пользователю взаимодействовать с вашим приложением. Подробнее
См. в Словарь Инструментарий принял BEM в качестве методологии стилизации элементов. Использование БЭМ не является обязательным, но рекомендуется.
О БЭМ
BEM означает модификатор блочного элемента. БЭМ — это простая система, которая помогает вам писать структурированные, недвусмысленные, простые в обслуживании селекторы. С помощью БЭМ вы назначаете классы элементам, а затем используете эти классы в качестве селекторов в таблицах стилей.
Классы БЭМ включают до трех компонентов:
- Имя блока: блок — это значимый отдельный объект или элемент управления. Например,
меню,кнопка,представление списка - Имя элемента: часть блока, не имеющая самостоятельного значения и семантически связанная с его блоком. Имена элементов добавляются к имени блока с помощью двух знаков подчеркивания. Например,
menu__item,button__iconилиlist-view__item. - Модификатор: флаг, который изменяет внешний вид или поведение блока или элемента. Добавьте модификатор к имени блока или элемента с двумя дефисами. Например,
menu--disabled,menu__item--disabled,button--smallилиlist-view__item--selected.
Каждая часть имени может состоять из латинских букв, цифр и дефисов. Каждая часть имени объединяется либо двойным подчеркиванием __, либо двойным тире --.
В следующем примере показан XML-код для меню:
<VisualElement class="menu">
<Label class="menu__item" text="Banana" />
<Label class="menu__item" text="Apple" />
<Label class="menu__item menu__item--disabled" text="Orange" />
</VisualElement>
Selectors
Поскольку каждый элемент оснащен классами, описывающими его роль и внешний вид, вы можете написать большинство своих селекторов, используя только одно имя класса:
.menu {
}
.menu__item {
}
.menu__item--disabled {
}
Вы должны иметь возможность стилизовать элементы, используя одно имя класса. Однако в некоторых случаях может потребоваться использование сложных селекторов. Например, вы можете использовать сложный селектор, когда стиль элемента зависит от модификатора его блока:
.button {
}
.button__icon {
}
.button--small {
}
.button--small .button__icon {
}
Будьте осторожны, не указывайте длинные селекторы. Длинный селектор может указывать на несоответствия в графическом дизайне вашего пользовательского интерфейса. Вам также следует избегать использования имен типов (Button, Label) или имен элементов (#my -кнопка) в ваших селекторах БЭМ.
Сделка VisualElement БЭМ-дружественной
UI Toolkit соответствует BEM. К каждому визуальному элементу прикреплены необходимые имена классов. Например, все TextElement имеют класс unity-text-element. Каждый экземпляр Button, производный от TextElement, имеет свой список классов, заполненный единством -button и классы unity-text-element.
Если вы получаете новый элемент от VisualElement или одного из его потомков, следуйте этим рекомендациям, чтобы убедиться, что ваш элемент легко стилизовать с помощью методологии БЭМ:
- Используйте
AddToClassList()в конструкторе, чтобы добавить соответствующие классы USS в ваши экземпляры элементов. - Если ваш новый элемент создает экземпляры дочерних элементов в своем конструкторе, назначьте соответствующие классы дочерним элементам. Например,
my-block__first-child,my-block__other-child. - Если ваш элемент поддерживает несколько состояний или вариантов, например маленький и большой, добавляйте и удаляйте соответствующие классы при изменении состояния элемента или при выборе варианта элемента.
- Если ваш элемент предназначен для использования в других проектах, рассмотрите возможность использования префикса для ваших классов, чтобы избежать конфликтов с именами существующих пользовательских классов.
