BEM命名法到底是什么？为什么选用它？以及实战操作

**

BEM命名法到底是什么？为什么选用它？以及实战操作

**

BEM命名法是什么？

BEM 代表Block__Element–Modifier 是CSS类名的命名约定标准。它被广泛采用，在编写易于阅读、理解和扩展的CSS时非常有用。其中，block代表哪个容器，element代表哪个元素，modifier代表元素对应的形态

为什么选择BEM命名法？

①BEM法可以传达元素、容器的功能和存在的意义；
②BEM法可以告诉我们组件的结构；
③BEM法可以为样式选择器设置一致的低级专用性

实战操作

情况一： 简单组件可能只使用一个元素，因此一个类就是block

<button class=”btn”></button>

<style>
  .btn {}
</style>  

情况二： 一个组件可能有变体，而变体应该用修饰符类来实现。

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

情况三： 更复杂的组件将有子元素（child elements），每个需要样式化的子元素都应该包含一个命名类。

<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>

情况四： 基于组件修饰符为元素设置样式

<figure class="photo photo--highlighted">
  <img class="photo__img" src="me.jpg">
  <figcaption class="photo__caption">Look at me!</figcaption>
</figure>
 
<style>
  .photo--highlighted .photo__img { }
  .photo--highlighted .photo__caption { }
</style>