BEM：HTML class 属性名称命名标准

BEM : Block-Element-Modifier 块 - 元素 - 修饰符， 是一种 class 名称的命名方法，被广泛使用，目的是使 CSS 更易于理解和维护。

BEM 命名提供了三个特定的好处：
它传达目的或功能
它传达组件结构
它为样式选择器设置了一致的低级别特异性
BEM naming provides three specific benefits:
It communicates purpose or function
It communicates component structure
It sets a consistent low-level of specificity for styling selectors

Block : 容器元素，
Element: 容器元素内的元素，即子元素
Modifier: 修饰符，

Block 或 Element 都可以有修饰符Modifier，如果三者都应用，一个class 名称的形式看起来可以是：

[block]__[element]–[modifier]

简单地说，连续两个下划线"__" 表示父子关系， 连续两个折线 "--" 表示修饰关系。例如 footer__credits 表明 "credits" 包含在 "footer" 内部，而 footer--large 是说，这是一个 footer 的变体，是一个"large" "footer"，比如可以用于主页。

<div className="header">
    <div className="container">
      <h1 className="header__title">{props.title}</h1>
      {props.subtitle && <h2 className="header__subtitle">{props.subtitle}</h2>}
    </div>
  </div>

  <div>
    <button
      className="button button--link">
      remove
      </button>
  </div>

下面的例子是这个网页上的：
https://sparkbox.com/foundry/bem_by_example

例 1

<!-- DO THIS -->
<button class="btn btn--secondary"></button>

<style>
  .btn {
    display: inline-block;
    color: blue;
  }
  .btn--secondary {
    color: green;
  }  
</style>  

---

<!-- DON'T DO THIS -->
<button class="btn--secondary"></button>

<style>
  .btn--secondary {
    display: inline-block;
    color: green;
  }  
</style> 

例 2

<!-- DO THIS -->
<figure class="photo">
  <img class="photo__img" src="me.jpg">
  <figcaption class="photo__caption">Look at me!</figcaption>
</figure>

<style>
  .photo { } /* Specificity of 10 */
  .photo__img { } /* Specificity of 10 */
  .photo__caption { } /* Specificity of 10 */
</style>

<!-- DON'T DO THIS -->
<figure class="photo">
  <img src="me.jpg">
  <figcaption>Look at me!</figcaption>
</figure>

<style>
  .photo { } /* Specificity of 10 */
  .photo img { } /* Specificity of 11 */
  .photo figcaption { } /* Specificity of 11 */
</style>

例 3

<!-- DO THIS -->
<figure class="photo">
  <img class="photo__img" src="me.jpg">
  <figcaption class="photo__caption">
    <blockquote class="photo__quote">
      Look at me!
    </blockquote>
  </figcaption>
</figure>

<style>
  .photo { }
  .photo__img { }
  .photo__caption { }
  .photo__quote { }
</style>

<!-- DON'T DO THIS -->
<figure class="photo">
  <img class="photo__img" src="me.jpg">
  <figcaption class="photo__caption">
    <blockquote class="photo__caption__quote"> <!-- never include more than one child element in a class name -->
      Look at me!
    </blockquote>
  </figcaption>
</figure>

<style>
  .photo { }
  .photo__img { }
  .photo__caption { }
  .photo__caption__quote { }
</style>

例 4

http://getbem.com/introduction/

<button class="button">
	Normal button
</button>
<button class="button button--state-success">
	Success button
</button>
<button class="button button--state-danger">
	Danger button
</button>
<style>
.button {
	display: inline-block;
	border-radius: 3px;
	padding: 7px 12px;
	border: 1px solid #D5D5D5;
	background-image: linear-gradient(#EEE, #DDD);
	font: 700 13px/18px Helvetica, arial;
}
.button--state-success {
	color: #FFF;
	background: #569E3D linear-gradient(#79D858, #569E3D) repeat-x;
	border-color: #4A993E;
}
.button--state-danger {
	color: #900;
}
</style>

---

1. https://stackoverflow.com/questions/36703546/what-is-bem-methodology
2. https://sparkbox.com/foundry/bem_by_example
3. http://getbem.com/introduction/
4. https://iter01.com/117907.html