CSS设计规则BEM快速入门手册

关于BEM

BEM是Block Element Modifier缩写, BEM通过以下3个维度来进行CSS设计及命名的.


 
 
 

  
Block 代码里大括号

  
Element 大括号里的元素

  
Modifier 标记上述2个的状态

 

目标


 
 
 

  
BEM中特别以MindBEMding命名规则为基础

  
使用SCSS

  
通过基本的简单类来设计

  
SCSS与HTML完美分离

 

命名规则

类block__element--modifier形式,block与element之间通过2个'_'连接,element与modifier之间通过2个'-'连接.
block为多个单词时,单词与单词之间通过1个'-'连接. element, modifier同样处理.

比如:
block名为artile-list中有个叫artile-title的element时, 这个element的类名为article-list__article-title

文件规则

以1个block为单位生成对应SCSS文件. 反之如果1个SCSS文件里定义多个block的话, 则说明违反的设计原则. 文件名为 block名字.scss.

例如上述的block article-list, 它所对应的文件名为article-list.scss.

在CSS中所有的名称都是全局有效, 因为命名重复导致可维护性下降. 在BEM中通过严格的命名规则来解决这个问题. 不管element名称重复多少个都没有影响.

但是, 得避免block名即文件名重复. 遵守以1个文件对应1个block的原则, 就可以很好的避免block名称重复的问题了.

SCSS

规则


 
 
 

  
使用嵌套和父节点名称来定义element


   
   
   

    
element内部不允许嵌套定义其它element

   

  
使用嵌套和父节点名称来定义modifier


   
   
   

    
modifier使用placeholder selector，来描述差异的部分

   

 

使用嵌套和父节点名称来定义element

比如article-list__article-title可定义如下

.article-list {
  width: 100%;

  &__article-title {
    font-size: 20px;
  }
}
element内部不允许嵌套定义其它element
假设有HTML如下
<div class="article-list">
  <div class="article-list__article-title">
    タイトル
    <span class="article-list__article-subtitle">サブタイトル</span>
  </div>
</div>
下面是违反BEM命名规则的范例
.article-list {
  width: 100%;

  &__article-title {
    font-size: 20px;

    &__article-subtitle {
      font-size: 16px;
    }
  }
}
在HTML中，article-subtitle是article-title的子节点，但如果在SCSS中也article-title