UIElements开发人员指南13 USS Writing style sheets(USS写作样式表)

最新推荐文章于 2025-09-15 18:25:17 发布

翻译最新推荐文章于 2025-09-15 18:25:17 发布 · 440 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://docs.unity3d.com/2019.3/Documentation/Manual/UIE-USS-WritingStyleSheets.html

Unity的UIElements 专栏收录该内容

16 篇文章

订阅专栏

本文介绍USS中BEM写作样式的应用，包括块、元素和修饰符的概念，以及如何在XML代码中实现BEM类。文章还提供了选择器的使用方法，以及如何使VisualElement更适应BEM。

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名称冲突。