USS写作样式表
为了保持井井有条,UIElements采用BEM作为元素造型的方法。虽然使用BEM不是强制性的,但建议使用它。
关于BEM
BEM代表块元素修饰符(Block Element Modifier)。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
。
每个名称部分可以包含拉丁字母,数字和短划线。每个名称部分都使用双下划线__
或双短划线--
连接在一起。
以下示例显示菜单的XML代码:
<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>
选择器
由于每个元素都配有描述其任务和外观的class,因此您可以只使用一个class名称来编写大多数选择器:
.menu {
}
.menu__item {
}
.menu__item--disabled {
}
您可以使用单个class名称来设置元素样式。然而,在某些情况下,您可能需要使用更复杂的选择器。例如,当元素的样式取决于其块的修饰符时,可以使用复杂选择器:
.button {
}
.button__icon {
}
.button--small {
}
.button--small .button__icon {
}
请注意,不要指定长选择器。长选择器会显示出您的UI图形设计中的不一致。您还应该避免在BEM选择器中使用类型名称(Button
,Label
)或元素名称(#my-button
)。
使VisualElement
对BEM更友好
UIElements支持BEM。每个可视元素都附有必要的class名称。例如,所有的TextElement
都有名为unity-text-element
的class。Button(
继承自TextElement
类)
的每个实例的都有class列表,其中包含unity-button
和unity-text-element
。
如果从VisualElement
或其某个后代派生新元素,请遵循以下规则,以确保使用BEM方法可以轻松设置元素:
- 在构造函数中使用
AddToClassList()
,将相关的USS class 添加到元素实例中。 - 如果新元素在其构造函数中实例化子元素,请将相关的class指定给子元素。例如
my-block__first-child
,my-block__other-child
。 - 如果元素支持多个状态或变体(例如small和large),则应该在元素状态更改,或元素变量选择时增删相关的class。
- 如果您的元素要用于其他项目,请考虑为类添加前缀以避免与用户现有的class名称冲突。