sinoui 库 className 命名规范

[liujinxing]

className 命名规范

本规范参考 BEM 命名规范。

基本形式

.Block__Element--Modifier

Block: 块

Element: 元素

Modifier: 修饰符

以 @sinoui/switch 为例

<span class="sinoui-switch sinoui-switch--disabled sinoui-switch--checked">
    <span class="sinoui-switch__label">
        <input class="sinoui-switch__input" />
        <span class="sinoui-switch__thumb" />
    </span>
    <span class="sinoui-switch__track">
    </span>
</span>

sinoui - 域名，命名空间。

switch - 块。

disabled、checked - 修饰符

__label、__input 、__thumb - 开关组件中的元素。

块与元素的区别

块有完整的语义，如开关组件。

元素是块的组成部分，不能脱离于块而独立被使用。如开关组件的轴（.sinoui-switch__track ），将它脱离于开关组件去用，没有实际意义。

块与元素的深度

只能有一级，不能出现如： sinoui-switch__label__input这样的情况。遇到这种情况，依场景而定。有两种方式：

• 方式一：类似@sinoui/switch的方式，所有的元素classname以根元素的块名称为前缀。

• 方式二：采用块嵌套块的方式。即可以定义一些子块。子块的多个单词之间使用 - 连接，如 sinoui-switch-label 。

[liujinxing]

包含关系的修饰符：

• --has-icon
• --has-description