如果编写项目的 CSS 代码只有一个人，或者项目的 CSS 代码量很小，可以用你喜欢，习惯的方式去组织你的 CSS 代码。
但是项目更大，更复杂，有多人编写项目的 CSS 代码（每个人有自己的风格），代码量大的时候，就需要一种统一规范去组织 CSS 代码，这时候 BEM 就派上用场了。

1. 什么是 BEM

1.1 概念

BEM(Block Element Modifier) 是一种命名 CSS class 的模式，使用这种模式可以让 CSS 代码更加利于维护。
标准的 BEM 写法是 .block-name__element-name--modifier-name。

2. Block

Block

页面上逻辑和功能独立的，可复用的组件，可以嵌套并相互交互，但在语义上它们保持平等，可以存在页面上不同的位置或不同项目中，保持样式不变。

可以使用字母，数字，连字符进行命名，任何 html 元素都可以成为一个 block，不依赖于页面上的其他 block 或者 element。

<header class="header"></header>

<style>
  .header {
    color: #333;
    background: #f5f5f5;
  }
</style>

3. Element

组成块的一部分，内部的任何元素都与块有关联，不能在块的外部使用。

<article class="article">
  <h2 class="article__title"></h2>
  <p class="article__content"></p>
</article>

<style>
  .article {
    padding: 12px;
  }

  .article__title {
    font-size: 1rem;
  }

  .article__content {
    font-size: 0.9rem;
  }
</style>

4. Modifier

用来表示块或者元素的状态，外观或者行为，不必须，可以选择使用。

<button class="btn btn--disabled"></button>

<style>
  .btn {
    color: #333;
    background-color: #fff;
  }

  .btn--disabled {
    color: #fff;
    background-color: #6c757d;
  }
</style>

5. 一个官方 demo

<header class="header">
  <div class="header__wrapper">
    <div class="logo">
      <img src="http://via.placeholder.com/32x32" class="logo__img" />
    </div>
    <nav class="nav">
      <ul class="menu">
        <li class="menu__item">
          <a href="#" class="menu__link menu__link--active">Home</a>
        </li>
        <li class="menu__item"><a href="#" class="menu__link">Works</a></li>
        <li class="menu__item"><a href="#" class="menu__link">About</a></li>
        <li class="menu__item"><a href="#" class="menu__link">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>
<main class="main">
  <div class="main__wrapper">
    <section class="content">
      <div class="item">
        <img class="item__img" src="http://via.placeholder.com/64x64" />
        <div class="item__content">
          <h6 class="item__title">Here is a title</h6>
          <p class="item__desc">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem quasi,
            repudiandae earum autem eligendi vel quidem.
          </p>
        </div>
      </div>
      <div class="item">
        <img class="item__img" src="http://via.placeholder.com/64x64" />
        <div class="item__content">
          <h6 class="item__title">Here is a title</h6>
          <p class="item__desc">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem quasi,
            repudiandae earum autem eligendi vel quidem.
          </p>
        </div>
      </div>
    </section>
    <aside class="aside">
      <div class="aside__item">
        <i class="aside__icon fas fa-heart"></i>
        <span class="aside__text">favorite</span>
      </div>
      <div class="aside__item">
        <i class="aside__icon fas fa-question-circle"></i>
        <span class="aside__text">question</span>
      </div>
      <div class="aside__item">
        <i class="aside__icon fas fa-user"></i>
        <span class="aside__text">user</span>
      </div>
    </aside>
  </div>
</main>
<footer class="footer">
  <p class="footer__desc">Copyright © 2018-2024;&nbsp;All Rights Reserved.</p>
</footer>

6. 使用 BEM 的误区

Block 误区:

这个 block 并非 inline-block 里的 block,而是将所有东西都划分为一个独立的模块,一个 header 是 block,header 里嵌套的搜索框是 block,甚至一个 icon 一个 logo 也是 block
block 可以相互嵌套

Element!误区:

如果一个 Element-son 是另一个 Element-father 的子元素,那么写法是 BlockElement-fatherElement-son_Modifer,嵌套多了会很长么? 不是的!!!

一个 Block 下的所有 Element 无论相互层级如何,都要摊开扁平的属于 Block， 所以 BEM 最多只有 B+E+M 三级,不可能出现 B+E+E+..+E+M 超长 class 名,也要求 E 不能同名

7. 我的习惯

1. 双下划线代表B和E连接例如 menu__item

2. 单下划线代表B和M或E和M的连接 例如 menu_active 或 menu__item_active

3. 中划线同英语里做连字符例如 mod-menu 或 mod-menu__item 这里 B或E或M需要多个单词来描述,就使用中划线