USS 的最佳实践

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

避免内联样式

如果可能，请使用 USS 文件而不是内联样式，以更有效地使用内存。

内联样式是按元素计算的，可能会导致内存开销。当您在 C# 脚本或 UXML 文件中对许多元素使用内联样式时，内存使用量会很快变高。

选择器体系结构注意事项

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

• 这:hoverselector 是导致交互性问题和重新样式的罪魁祸首。
• 性能影响显示在分析器帮助您优化游戏的窗口。它显示了在游戏的各个领域花费了多少时间。例如，它可以报告渲染、动画制作或游戏逻辑所花费的时间百分比。更多信息
  请参阅术语表.

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

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

层次结构中的元素数量是影响性能的主要事实。更新样式对于简单的 UI 可能可以忽略不计，但对于具有数千个元素的大型 UI 来说很重要。如果一个元素与许多选择器匹配，则会导致合并来自每个规则的样式的开销。

复杂选择器层次结构指南

通常，复杂选择器比简单选择器对性能的影响更大。复杂选择器依赖于元素的祖先来匹配它。如果可能，请考虑以下事项：

• 如果要进行部分匹配，请使用子选择器 (selector1 > selector2 > selector3）而不是后代选择器 (selector1 selector2 selector3).
• 避免在复杂选择器 （selector1 > selector2 > *） 或后代选择器与通用选择器 （selector1 * selector2).通用选择器根据选择器测试每个可能影响性能的潜在元素。
• 避免使用:hoverpseudo-class 在具有许多后代的元素上的选择器中，例如.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 工具包遵循 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 选择器