Less 命名空间

Less 命名空间无非就是遵守目前最为流行和通用的 BEM 命名规范，他有三种符号来表示扩展关系，主要代表了 BEM 中的 块（Block）、元素（Element）、修饰符（Modifier）

BEM

块 (Block)

块（Block），我们如果想更简单的理解的话，他其实就是这一范围的统称。就比如一个列表，那么他的块就是 .list：

1
2

.list {
}

元素（Element）

从上往下，块的下面可以添加元素，假设我们需要为列表增加一个标题样式，就是 **元素 (Element)**，那么可以这样写：

1
2
3
4
5
6

.list {
  &__title {
    color: #007fff;
    font-weight: bold;
  }
}

而 View 可以直接也根据这个层级顺序进行使用样式:

1
2
3

<div class="list">
    <p class="list__title">hello</p>
</div>

修饰符（Modifier）

修饰符我们可以理解为就是一个元素的状态，假设一个标题有：大、中、小 三个大小，为了让他更加的明显，我们可以使用修饰符进行区分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

.list {
  &__title_big {
    font-size: 10em;
    font-weight: bold;
    color: #007fff;
  }
  &__title_middle {
    font-size: 5em;
    font-weight: bold;
    color: #007fff;
  }
  &__title_small {
    font-size: 1em;
    font-width: bold;
    color: #007fff;
  }
}

而 view 识图依然可以根据层级关系进行引入

1
2
3
4
5

<div class="list">
    <p class="list__title_big">hello</p>
    <p class="list__title_middle">hello</p>
    <p class="list__title_small">hello</p>
</div>

BEM 的书写风格并不于此，只需要遵守其 层级关系即可。

File name

当然除了类名的书写规范，还有文件的名称，我们以腾讯的 Less 书写规范为例：