BEM是一套针对css类样式的命名方法
**

规范

定义

Block：页面中的大区域，表示最顶级的划分，例如：轮播图(banner)、布局(layout)、文章(article)等等
element：区域中的组成部分，例如：轮播图中的横幅图片(banner__img)、轮播图中的容器（banner__container）、布局中的头部(layout__header)、文章中的标题(article_title)

modifier：可选。通常表示状态，例如：处于展开状态的布局左边栏（layout__left_expand）、处于选中状态的轮播图小圆点(banner__dot_selected)

书写规范

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

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

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

示例如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         *{
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  12.         ul,li{
  13.             list-style:  none;
  14.         }
  15.         .banner{
  16.             width: 300px;
  17.             height: 200px;
  18.             margin:  0 auto;
  19.             overflow: hidden;
  20.             position: relative;
  22.         }
  23.         .banner__viewport{
  24.             width: 300px;
  25.             height: 200px;
  26.             border: 1px solid red;
  27.         }
  28.         .banner__imgContainer{
  29.             width: 900px;
  30.             height: 100%;
  31.             background: rgba(0, 255, 0, .5);
  32.         }
  33.         .banner__imgList{
  34.             width: 300px;
  35.             height: 100%;
  36.             float: left;
  37.         }
  38.         .banner__imgList__link{
  39.             display: block;
  40.             width: 100%;
  41.             height: 100%;
  42.             background: rgba(0, 0, 244, .5);
  43.         }
  44.         .banner__imgList img{
  45.             width: 100%;
  46.             height: 100%;
  47.         }
  48.         .banner__dotContainer{
  49.             width: 40px;
  50.             height: 10px;
  51.             position: absolute;
  52.             left: 50%;
  53.             transform: translate(-50% ,0);
  54.             bottom: 10px;
  55.             background: rgba(0, 0, 0, .5);
  56.             display: flex;
  57.             justify-content: space-between;
  58.         }
  59.         .banner__dot{
  60.             display: block;
  61.             width: 10px;
  62.             height: 10px;
  63.             border-radius: 50%;
  64.             background: #fff;
  65.         }
  66.     </style>
  67. <body>
  68.     <section class="banner">
  69.             <ul class="banner__imgContainer">
  70.                 <li class="banner__imgList">
  71.                     <a href="javascript:void()" class="banner__imgList__link">
  72.                         <img src="./1.jpg" alt="" >
  73.                     </a>
  74.                 </li>
  75.                 <li class="banner__imgList">
  76.                     <a href="javascript:void()" class="banner__imgList__link">
  77.                         <img src="./1.jpg" alt="" >
  78.                     </a>
  79.                 </li>
  80.                 <li class="banner__imgList">
  81.                     <a href="javascript:void()" class="banner__imgList__link">
  82.                         <img src="./1.jpg" alt="" >
  83.                     </a>
  84.                 </li>
  85.             </ul>
  86.             <div class="banner__dotContainer">
  87.                 <span class="banner__dot banner__dot_active"></span>
  88.                 <span class="banner__dot"></span>
  89.                 <span class="banner__dot"></span>
  90.             </div>
  91.     </section>
  92. </body>
  93. </html>

案例分享https://juejin.cn/post/6844903517358915598