Unity2019 UIElement 笔记（八）USS+BEM

USS写作样式表

为了保持井井有条，UIElements采用BEM作为造型元素的方法。虽然使用BEM不是强制性的，但建议使用。

关于BEM

BEMBlock Element Modfier（块元素编辑器），是一个简单的系统，可以帮助编写结构化，不模糊，易于维护的选择器。使用BEM，可以为元素分配类，然后将这些类用作样式表中的选择器。
它有如下3个特性：

1. 易用性 如果想使用BEM，你只需要采用BEM命名规范即可
2. 单元性 独立的块和CSS选择器，可以使得你的代码可重用和单元化
3. 灵活性 使用BEM之后，方法和工具可以按照你喜欢的方式去组织和配置

Block，Element和Modifier

• Block：块，独立的实体，它本身是有意义的。
  – 例子 menu，button，list-view
• Element：块的一部分，没有独立的含义，并且在语义上与其块相关联。
  – 使用两个下划线将元素名称附加到块名称
  – 例如，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" />
    <Label class="menu__item menu__item--enable" text="Banana" />
  VisualElement>

选择器（Selectors）

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

.menu 
{
	border-radius: 3px;
	padding: 7px 12px;
}
.menu__item 
{
	color: #FFF;
}
.menu__item--disabled 
{
	color: #900;
}
.menu__item--enable
{
	color: #090;
}

当然还有一些更加复杂的选择器形式，但是要避免在BEM先择期中使用类型名称（TypeName）或者元素名称（Name）

更加具体的内容请自己查询或者参考以下文档：
https://www.jianshu.com/p/339fdb93e155 前端领域的BEM到底是什么？