BEM

BEM 是一套针对 css 类样式的命名方法，是解决类名冲突的一种规范。

其他命名方法还有：OOCSS、AMCSS、SMACSS 等等

BEM 全称是：Block Element Modifier

一个完整的 BEM 类名：block**element_modifier，例如：banner**dot_selected，可以表示：轮播图中，处于选中状态的小圆点

三个部分的具体含义为：

Block：页面中的大区域，表示最顶级的划分，例如：轮播图(banner)、布局(layout)、文章(article)等等
element：区域中的组成部分，例如：轮播图中的横幅图片(banner__img)、轮播图中的容器（banner__container）、布局中的头部(layout__header)、文章中的标题(article_title)
modifier：可选。通常表示状态，例如：处于展开状态的布局左边栏（layout__left_expand）、处于选中状态的轮播图小圆点(banner__dot_selected)

css

.banner__container{
    xxx
}
.bannner__dots__selected{
    xxx
}

/*允许*/
.banner__containner img{
    xxx
}

在某些大型工程中，如果使用 BEM 命名法，还可能会增加一个前缀，来表示类名的用途，常见的前缀有：

l: layout，表示这个样式是用于布局的
c: component，表示这个样式是一个组件，即一个功能区域
u: util，表示这个样式是一个通用的、工具性质的样式
j: javascript，表示这个样式没有实际意义，是专门提供给 js 获取元素使用的

css

.u-primary__box{
    xxx
}

实践

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./index.css" />
  </head>

  <body>
    <div class="banner__container">
      <div class="banner__imgWrap">
        <img src="./p.png" alt="" />
        <img src="./p.png" alt="" />
        <img src="./p.png" alt="" />
      </div>

      <div class="banner__dotsContainner">
        <span class="banner__dotsItem banner__dotsItem__active"></span>
        <span class="banner__dotsItem"></span>
        <span class="banner__dotsItem"></span>
      </div>
    </div>
  </body>
</html>

BEM ​

实践 ​

BEM

实践