BEM

什么是 BEM 命名规范

Bem 是块（block）、元素（element）、修饰符（modifier）的简写

块: 组件
元素：块的子节点
修饰符：改变某个块的外观的标志，不同状态或不同版本
Yandex 中文：燕基科斯提出的一种前端 CSS 命名方法论

BEM的关键是，可以获得更多的描述和更加清晰的结构，从其名字可以知道某个标记的含义。于是，通过查看 HTML 代码中的 class 属性，就能知道元素之间的关联。

BEM 命名模式

- 中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。

__ 双下划线：双下划线用来连接块和块的子元素

_ 单下划线：单下划线用来描述一个块或者块的子元素的一种状态

.block {}

.block__element {}

.block--modifier {}

block 代表了更高级别的抽象或组件。
block__element 代表 .block 的后代，用于形成一个完整的 .block 的整体。
block--modifier 代表 .block 的不同状态或不同版本。
使用两个连字符和下划线而不是一个，是为了让你自己的块可以用单个连字符来界定

每一个块(`block`)名应该有一个`命名空间`（`前缀`）

sub就是前缀

1
2
3

.sub-block__element {}

.sub-block--modifier {}

什么时候应该用 BEM 格式

并不是每个地方都应该使用 BEM 命名方式。当需要明确关联性的模块关系时，应当使用 BEM 格式。
比如只是一条公共的单独的样式，就没有使用 BEM 格式的意义：

1
2
3

.hide {
    display: none !important;
}

在 CSS 预处理器中使用 BEM 格式

BEM 的一个槽点是，命名方式长而难看，书写不雅。相比 BEM 格式带来的便利来说，我们应客观看待。

而且，一般来说会使用通过 LESS/SASS 等预处理器语言来编写 CSS，利用其语言特性书写起来要简单很多

以 LESS 为例：

.article {
    max-width: 1200px;
    &__body {
        padding: 20px;
    }
    &__button {
        padding: 5px 8px;
        &--primary {background: blue;}
        &--success {background: green;}
    }
}
// 或者
@classname: header;

.@{classname} {
    .@{classname}__body {
        padding: 20px;
    }

    .@{classname}__button {
        .@{classname}__button--primary {
            background: #329FD9;
        }

        .@{classname}__button--default {
            background: none;
        }
    }
}

在Sass中的使用

.header {
    &__body {
        padding: 20px;
    }

    &__button {
        &--primary {
            background: #329FD9;
        }
        &--default {
            background: none;
        }
    }
}

在流行框架(VUE、REACT)的组件中使用 BEM 格式

在当前流行的 Vue.js 、 React 、 Angular 等前端框架中，都有 CSS 组件级作用域的编译实现，其基本原理均为利用 CSS 属性选择器特性，为不同的组件生成不同的属性选择器。
当你选择了这种局部作用域的写法时，在较小的组件中，BEM 格式可能显得没那么重要。但对于公共的、全局性的模块样式定义，还是推荐使用 BEM 格式。

另外，对于对外发布的公共组件来说，一般为了风格的可定制性，都不会使用这种局部作用域方式来定义组件样式。此时使用 BEM 格式也会大显其彩。

避免 `.blockel1el2` 的格式

在深层次嵌套的 DOM结构下，应避免过长的样式名称定义。

层级最后不要超过 4 级，不然增加阅读的理解难度

//常规写法：
.xxx{}
.xxx__item{}
.xxx__item_current{}

//常规 嵌套写法
.xxx__item_current .mod-xxx__link{}


//BEM推荐：
.xxx{}
.xxx__item{}
.xxx__item_hightlight{}
.xxx__product-name{}
.xxx__link{}
.xxx__ming-zi-ke-yi-hen-chang{}

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

//对应的HTML结构如下：
<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>

BEM