BEM

BEM 代表 “块（block）,元素（element）,修饰符（modifier）”,我们常用这三个实体开发组件。

在选择器中，由以下三种符号来表示扩展的关系：

1
2
3
4
5
-   中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。
__  双下划线：双下划线用来连接块和块的子元素
_   单下划线：单下划线用来描述一个块或者块的子元素的一种状态

type-block__element_modifier

块（block）

1
.list

元素（element）

1
2
3
4
5
6
.list{}
.list .item{}


.list{}
.list__item{}

修饰符（modifier）

1
2
3
4
5
6
7
8
9
10
.list{}
.list.select{}
.list .item{}
.list .item.active{}


.list{}
.list_select{}
.list__item{}
.list__item_active{}

LESS 书写规范

子 less 注解
lib-base.less 预定义的变量，例如颜色、字号、字体
lib-mixins.less 用于混合的代码，例如渐变、半透明的混合
lib-reset.less 初始化
lib-ui.less 颗粒化 ui 功能
xxx.less 模块样式

书写原则

  1. 原则上不会出现 2 层以上选择器嵌套
    使用 BEM 原则，用命名来解耦，所有类名都为一层，增加效率和复用性

  2. 两层选择器嵌套出现在.mod-xxx__item_current 子元素的情况，如下：
    使用推荐的嵌套写法

常规写法：

1
2
3
4
5
.xxx{}
.xxx__item{}
.xxx__item_current{}
// 嵌套写法
.xxx__item_current .mod-xxx__link{}

推荐:

1
2
3
4
5
6
7
8
9
10
11
.xxx{}
.xxx__item{}
.xxx__item_hightlight{}
.xxx__product-name{}
.xxx__link{}
.xxx__ming-zi-ke-yi-hen-chang{}

// 嵌套写法
.xxx__item_current{
    .xxx__link{}
}

对应的 HTML 结构如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ul class="xxx">
    <li class="xxx__item">第一项
        <div class="xxx__product-name">我是名称</div>
        <span class="xxx__ming-zi-ke-yi-hen-chang">看类名</span>
        <a href="#" class="xxx__link">我是link</a>
    <li>
    <li class="xxx__item xxx__item_current">第二项 且 当前选择项
        <div class="xxx__product-name">我是名称</div>
        <a href="#" class="xxx__item-link">我是link</a>
    <li>
    <li class="xxx__item xxx__item_hightlight">第三项 且 特殊高亮
         <div class="xxx__product-name">我是名称</div>
        <a href="#" class="xxx__item-link">我是link</a>
    <li>
</ul>