USS 最佳实践

在编写 USS 样式 视觉元素视觉树的节点，它实例化或派生自 C# VisualElement 类。您可以设置外观，定义行为，并将它作为 UI 的一部分显示在屏幕上。 更多信息
参见 术语表 时，请遵循以下最佳实践。

避免使用内联样式

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

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

选择器架构注意事项

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

• :hover 选择器是导致选择器引起交互性问题和重新样式化问题的罪魁祸首。
• 性能影响出现在 分析器一个帮助您优化游戏的窗口。它显示了您的游戏在各个方面花费了多少时间。例如，它可以报告渲染、动画或游戏逻辑中花费的时间百分比。 更多信息
  参见 术语表 中的“更新样式”下。

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

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

层次结构中元素的数量是影响性能的主要因素。“更新样式”对于简单的 UI(用户界面) 允许用户与您的应用程序交互。Unity 目前支持三种 UI 系统。 更多信息
参见 术语表 可能可以忽略不计，但对于具有数千个元素的大型 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 类。每个 Button 实例（它派生自 TextElement）的类列表都填充了 unity-button 和 unity-text-element 类。

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

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

其他资源

• USS 简介
• USS 选择器