Unity3D :USS 的最佳实践

推荐:将NSDT场景编辑器加入你的3D工具链
3D工具集:NSDT简石数字孪生

USS 的最佳实践

在编写 USS 以样式时遵循以下最佳实践视觉元素
.

避免内联样式

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

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

选择器体系结构注意事项

所有 USS 选择器都在运行时应用,因此体系结构会影响初始化性能。当元素首次出现或其类更改时,将应用USS选择器:

  • 选择器是选择器导致交互性问题和重新样式的罪魁祸首。:hover
  • 性能影响显示在分析器
    .

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

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

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

复杂选择器层次结构准则

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

  • 如果要进行部分匹配,请使用子选择器 () 而不是后代选择器 ()。selector1 > selector2 > selector3selector1 selector2 selector3
  • 避免在复杂选择器 () 的末尾使用通用选择器或将后代选择器与通用选择器 () 结合使用。通用选择器根据选择器测试每个可能影响性能的潜在元素。selector1 > selector2 > *selector1 * selector2
  • 避免在具有许多后代的元素的选择器中使用伪类,例如 。鼠标移动会使选择器所针对的元素的整个层次结构无效。:hover.yellow:hover > * > Button:hover

使用 BEM 提高性能

您可以使用块元素修饰符 (BEM) 约定来减少分层选择器。使用 BEM,每个元素都会接收一个类,该类将其特定存在组合在另一个元素中。

关于贝姆

BEM 代表 块元素修饰符。BEM 是一个简单的系统,可帮助您编写结构化、无歧义、易于维护的选择器。使用 BEM,您可以将类分配给元素,然后将这些类用作样式表中的选择器。

BEM 类最多有三个组件:

  • 块名称:块是有意义的独立实体或控件。例如menubuttonlist-view
  • 元素名称:块的一部分,没有独立的含义,在语义上与其块相关联。元素名称使用两个下划线附加到块名称。例如,、 或menu__itembutton__iconlist-view__item
  • 修饰符:更改块或元素的外观或行为的标志。将修饰符追加到带有两个短划线的块或元素名称。例如, 、 、 或 。menu--disabledmenu__item--disabledbutton--smalllist-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 选择器中使用类型名称 (, ) 或元素名称 ()。ButtonLabel#my-button

使视觉元素对 BEM 友好

UI 工具包遵循 BEM。每个可视元素都附加了必要的类名。例如,都有类。派生自 的每个实例都用 和 填充了其类列表。TextElementunity-text-elementButtonTextElementunity-buttonunity-text-element

如果您从其后代或其中一个派生新元素,请遵循以下准则,以确保使用 BEM 方法轻松设置元素样式:VisualElement

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

3D建模学习工作室整理翻译,转载请注明出处!

上一篇:Unity3D :USS 内置变量简介 (mvrlink.com)

下一篇:Unity3D :主题样式表 (TSS) (mvrlink.com)

NSDT场景编辑器 | NSDT 数字孪生 | GLTF在线编辑器 | 3D模型在线转换 | UnrealSynth虚幻合成数据生成器 | 3D模型自动纹理化工具
2023 power by nsdt©鄂ICP备2023000829号