BEM规范

Posted 2021-03-07 yanze

B(block)

块是指页面中的相对独立的模块或是组件，比如header是一个block，其中的输入框也是一个block，block之间可以进行嵌套

BEM中如果存在多个单词的情况，都使用中线-连接。

 

E(element)

指块中的子元素，比如header的标题和内容，需要使用父级block命名作为前缀，同时使用双下划线__进行连接。如：header__title。

如果存在子元素嵌套的情况，那么被嵌套的子元素的也被视为block的直接子元素。

例：

<dl class="header">
  <dt class="header__title">
    大标题
  </dt>
  <dd class="header__desc">
    内容
  </dd>
</dl>

 

 

M(modifier)

修饰器可以理解为一个待定的状态，与E使用双中线--连接

通常我们在编写组件的时候使用抽象的方法解决复用的问题,例如按钮的尺寸、大小、颜色都是这类状态。

<dl class="header">
  <dt class="header__title">
    大标题
　　<button class="header__login-button header__login-button__active"/>
  </dt>
</dl>