USS写作样式表
为了保持井井有条,UIElements采用BEM作为造型元素的方法。虽然使用BEM不是强制性的,但建议使用。
关于BEM
BEMBlock Element Modfier(块元素编辑器),是一个简单的系统,可以帮助编写结构化,不模糊,易于维护的选择器。使用BEM,可以为元素分配类,然后将这些类用作样式表中的选择器。
它有如下3个特性:
- 易用性 如果想使用BEM,你只需要采用BEM命名规范即可
- 单元性 独立的块和CSS选择器,可以使得你的代码可重用和单元化
- 灵活性 使用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到底是什么?