USS 最佳实践

在编写 USS 以设置视觉元素的样式时，请遵循以下最佳实践。

避免内联样式

尽可能使用 USS 文件而不是内联样式，以提高内存使用率。

内联样式基于每个元素，可能会导致内存开销。当在许多元素上的 C# 脚本或 UXML 文件中使用内联样式时，内存使用量会快速增加。

选择器架构注意事项

所有 USS 选择器都在运行时应用，因此架构会影响初始化性能。当元素首次出现或其类发生更改时应用 USS 选择器：

• :hover 选择器是选择器导致交互性问题和重新设置样式的主要原因。
• 性能影响显示在 Profiler 中的 Update Styling 下。

通常，如果您有很多选择器，这不是问题，因为每个 USS 文件都会转换为查找表。但是，向元素添加类时，性能会呈线性下降。列表中的每个类都用于查询查找表。复杂性是 N1 x N2，其中：

• N1 是元素上的类数
• N2 是当前适用的 USS 文件数

层级结构中的元素数量是影响性能的主要原因。对于简单的__ UI__（即用户界面，User Interface）让用户能够与您的应用程序进行交互。Unity 目前支持三种 UI 系统。更多信息
See in Glossary，更新样式可能微不足道，但对于具有数千个元素的大型 UI，更新样式非常重要。如果一个元素匹配大量选择器，则会导致合并来自每个规则的样式产生开销。

复杂选择器层级结构准则

通常，相比简单选择器，复杂选择器对性能的影响更大。复杂选择器依赖于元素的前代来匹配元素。如果可能，请考虑以下几点：

• 如果要进行部分匹配，请使用子选择器 (selector1 > selector2 > selector3) 而不是后代选择器 (selector1 selector2 selector3)。
• 避免在复杂选择器 (selector1 > selector2 > *) 末尾使用通用选择器，或避免将后代选择器与通用选择器 (selector1 * selector2) 组合使用。通用选择器根据可能影响性能的选择器测试每个潜在元素。
• 避免在具有许多后代的元素（例如 .yellow:hover > * > Button）的选择器中使用 :hover 伪类。鼠标移动会使 :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 的图形设计不一致。
• 避免在 BEM 选择器中使用类型名称（Button、Label）或元素名称 (#my-button)。

使视觉元素对 BEM 友好

UI 工具包遵循 BEM。每个视觉元素都附有必要的类名。例如，所有 TextElement 都具有 unity-text-element 类。派生自 TextElement 的每个 Button 实例的类列表中都填充了 unity-button 和 unity-text-element 类。

如果从 VisualElement 或其某个后代派生新元素，请遵循以下准则以确保元素易于使用 BEM 方法进行样式设置：

• 使用构造函数中的 AddToClassList()，将相关 USS 类添加到元素实例。
• 如果新元素在其构造函数中实例化子元素，请将相关类分配给子元素。例如 my-block__first-child、my-block__other-child。
• 如果您的元素支持多种状态或变体（例如不同大小），请在元素状态变化或选择元素变体时添加和删除相关类。
• 如果要在其他项目中使用该元素，请考虑给类添加前缀以避免与现有用户类名称冲突。

其他资源

• USS 简介
• USS 选择器