USS 编写样式表

To keep things organized, UIElements has adopted BEM as the methodology for styling elements. While uisng BEM is not mandatory, it is recommended.

关于 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。

每个名称部分可能由拉丁字母、数字和短划线组成。每个名称部分用双下划线 __ 或双短划线 -- 连接起来。

以下示例显示了菜单的 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>

选择器

由于每个元素都配有描述其作用和外观的类，因此您可以仅使用一个类名来编写大多数选择器：

.menu {
}

.menu__item {
}

.menu__item--disabled {
}

应该能够使用单个类名来设置元素的样式。但是在某些情况下，可能需要使用复杂的选择器。例如，元素的样式取决于其块的修饰符时，可以使用复杂的选择器：

.button {
}

.button__icon {
}

.button--small {
}

.button--small .button__icon {
}

注意不要指定长选择器。长选择器可能表示 UI 的图形设计不一致。还应该避免在 BEM 选择器中使用类型名称（Button、Label）或元素名称 (#my-button)。

使 VisualElement 支持 BEM

UIElements 遵守 BEM 标准。每个视觉元素都附有必要的类名。例如，所有 TextElement 具有 unity-text-element 类。从 TextElement 派生的 Button 的每个实例在类列表中都填充有 unity-button 和 unity-text-element 类。

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

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