Рекомендации для USS

Следуйте этим рекомендациям при написании USS для стилизации визуальных элементов.

Избегайте встроенных стилей

Используйте файлы USS вместо встроенных стилей, когда это возможно, для более эффективного использования памяти.

Встроенные стили применяются для каждого элемента и могут вызвать перегрузку памяти. Когда вы используете встроенные стили в скрипте C# или файле UXML для многих элементов, использование памяти быстро становится высоким.

Архитектура селекторов

Все селекторы USS применяются во время выполнения, поэтому архитектура влияет на производительность инициализации. Селекторы USS применяются, когда элемент появляется впервые или когда его классы изменяются:

• Селектор :hover является главным виновником того, что селектор вызывает проблемы интерактивности и переделки стиля.
• Влияние на производительность отображается под Обновление стиля в Profiler.

Обычно большое количество селекторов проблемы не создаёт: каждый файл USS превращается в таблицу поиска. Однако производительность падает линейно по мере добавления классов к элементу: каждый класс из списка используется для запроса к таблице поиска. Сложность составляет N1 x N2где:

• N1 — количество классов на элементе
• N2 — текущее число применимых файлов USS

Количество элементов в иерархии является основным фактором, влияющим на производительность. Обновление стиля может быть незначительным для простых UIs, но значительным для больших UIs, имеющих несколько тысяч элементов. Если элемент соответствует большому количеству селекторов, это вызывает дополнительные затраты на слияние стилей, поступающих от каждого правила.

Руководство по иерархии комплексных селекторов

В целом, сложные селекторы оказывают большее влияние на производительность, чем простые селекторы. Комплексные селекторы зависят от предков элемента, чтобы соответствовать ему. Когда это возможно, учитывайте следующее:

• Если вы хотите иметь частичное соответствие, используйте выбор ребенка (selector1 > selector2 > selector3) вместо низходящий селектор (selector1 selector2 selector3).
• Избегайте использования универсального селектора в конце сложных селекторов (selector1 > selector2 > *) или комбинации потомственного селектора с универсальным селектором (selector1 * selector2). Универсальный селектор проверяет каждый потенциальный элемент против селектора, который может повлиять на производительность.
• Избегайте использования :hover псевдокласс в селекторах для элементов с большим числом потомков, таких как .yellow:hover > * > Button. Движения мыши аннулируют всю иерархию элементов, на которые направлено действие :hover селектор.

Используйте BEM для повышения производительности

Вы можете использовать Модификаторы блоковых элементов (BEM), чтобы сократить число иерархических селекторов. По соглашению BEM каждый элемент получает класс, отражающий его конкретное положение внутри другого элемента.

О BEM

BEM означает модификатор блокового элемента. BEM — это простая система, которая помогает вам писать структурированные, недвусмысленные, легко поддерживаемые селекторы. С помощью BEM вы назначаете классы элементам и затем используете эти классы в качестве селекторов в таблицах стилей.

Классы BEM имеют до трех компонентов:

• Имя блока: блок представляет собой значимый, самостоятельный объект или контроль. Например, menu, button, list-view
• Имя элемента: часть блока, которая не имеет самостоятельного значения и семантическим образом связана с блоком. Имя элемента добавляется к имени блока с помощью двух подчеркиваний. Например, menu__item, button__iconили list-view__item
• Модификаторы: флаг, изменяющий внешний вид или поведение блока или элемента. Добавьте модификатор к имени блока или элемента с двумя тире. Например, menu--disabled, menu__item--disabled, button--smallили list-view__item--selected.

Каждая часть имени может состоять из латинских букв, цифр и тире. Каждая часть имени соединяется либо двойной подчёркивающей чертой __, либо двойной тире --.

В следующем примере показан код UXML для меню:

<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>

Каждый элемент снабжён классами, описывающими его роль и внешний вид, поэтому большинство селекторов можно записать всего одним именем класса:

.menu {
}

.menu__item {
}

.menu__item--disabled {
}

Оформить элементы можно одним именем класса. Иногда, впрочем, нужны сложные селекторы. Например, сложный селектор пригодится, когда стиль элемента зависит от модификатора его блока:

.button {
}

.button__icon {
}

.button--small {
}

.button--small .button__icon {
}

Примечание:

• Избегайте указывать длинные селекторы. Длинный селектор может указывать на непоследовательность в графическом дизайне вашего UI.
• Не используйте имена типов (Button, Label) или имена элементов (#my-button) в селекторах BEM.

Сделайте визуальные элементы BEM-приятными

UI Toolkit придерживается BEM. К каждому визуальному элементу прикреплены необходимые имена классов. Например, все TextElement имеют unity-text-element класс. Каждый экземпляр Button, которая вытекает из TextElement, его список классов заполняется значением unity-button и unity-text-element классы.

Если вы получаете новый элемент из VisualElement или одного из его потомков, следуйте этим рекомендациям, чтобы убедиться, что ваш элемент легко стилизовать с помощью методологии BEM:

• Используйте AddToClassList() в конструкторе, чтобы добавить соответствующие классы USS к экземплярам элементов.
• Если ваш новый элемент инстанционирует дочерние элементы в своем конструкторе, назначайте дочерним элементам соответствующие классы. Например, my-block__first-child, my-block__other-child.
• Если ваш элемент поддерживает несколько состояний или вариантов — например, small и large, — добавляйте и удаляйте соответствующие классы при изменении состояния элемента или при выборе варианта.
• Если вы используете этот элемент в других проектах, добавьте к своим классам префикс, чтобы избежать конфликтов с уже существующими пользовательскими именами классов.

Дополнительные ресурсы

• Введение в USS
• USS селекторов