BEM

BEM是CSS类名的命名约定标准，被广泛使用，且在编写时更易于阅读、理解。

BEM命名的好处

• 传达目的或功能
• 传达组件结构
• 为样式选择器设置一致的低级别特异性

工作原理

BEM类名最多包含三部分

1. 块：组件最外层的父元素定义为块
2. 元素：组件内部可以是一个或多个称为元素的子元素
3. 修饰符：块或元素可能具有有修饰符表示的变体

[block]__[element]--[modifier]

范例：

• nav__logo，.photo__img，.photo__img--framed
• .btn--secondary
• .hero__text--small，.hero__text--big

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

<style>
    .photo__img{
        /* photo里图片的默认样式*/
    }
     .photo__img--framed{
         /* 在默认基础上新增的样式*/
     }
      .photo__caption--large{
         /* 在默认基础上新增的样式*/
     }
</style>