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建模学习工作室整理翻译,转载请注明出处!