CSS命名规范BEM

首先直接给原文链接：getBEM

BEM的命名规则：

计算机科学里面只有两个问题：缓存失效和对象命名。——Phil Karlton

正确的样式指南能显著地提高开发速度、debug效率和继承代码的执行效率，然而很多CSS代码实际上并没有良好的组织结构和命名的规范，这导致了过去很长一段时间内，CSS代码都是一个难以维护的状态。

BEM方法为所有Web开发人员提供了一个命名的规范，它会让开发者对于Web设计和开发提供新的思路。

BEM代表：Block、Element、Modifier。

Block：

含义：包含一个独立的具有意义的实体。blocks可以嵌套以及相互之间交互，语法上它们都是等价的，且不存在继承结构。内部不含DOM元素的实体（比如controllers或者models）也能当作block。

命名：Block的名字可以包含拉丁字母、数字和中划线。为了形成一个CSS的class，可以在名字前面加个前缀当作命名空间：.block。

HTML：任何的DOM节点在拥有了一个class名字之后都能当作一个block。

<div class="block">...</div>
 
 

CSS：

• 只使用class选择器；
• 不使用tag或者id选择器；
• 不依赖于页面中的其他blocks或者elements

.block{ color: #042; }

 
 

Element：

含义：作为block的一部分，不是一个独立的实体。所有的element在语义上都属于它的block。

命名：Element名称可以包含拉丁字母、数字、中划线和下划线。形成的class名称为：block名称加两个下划线和element名称：.block_elem。

HTML：任何位于block中的DOM节点都可以被当作一个element。一个block中的所有elements在语义上都是等价的。

 
 

   
   

    
    

   
   
   
   

    
    

     
     <div class="block">
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         ...
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     <span class="block__elem">
     
     </span>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     </div>
    
    
   
   
 
 

CSS：

• 只使用class选择器；
• 不使用tag或者id选择器；
• 不依赖于页面中的其他blocks或者elements

示例：

 
 

   
   

    
    

   
   
   
   

    
    

     
     /* 正确的用法 */
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     .block__elem{ 
     
     color: 
     
     #042; }
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     /* 不规范的用法 */
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     .block 
     
     .block__elem{ 
     
     color: 
     
     #042; }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     div
     
     .block__elem{ 
     
     color: 
     
     #042; }
    
    
   
   
 
 

Modifier：

含义：blocks或者elements的标识，用来改变样式（如：背景颜色）、行为（如何反馈用户的行为）或者状态 （如：disabled、focused）

命名：modifier名称可以包含拉丁字母、数字、中划线和下划线。对应的class名称由block名称或者element名称加上两个中划线：.block--mod、.block__elem--mod、.block--color-black、.block--color-red。对于复杂的modifier中的空格符使用中划线来替代。

HTML：Modifier是作为一个额外的class作为对已有的block/element DOM节点的补充，代表modifier的class只能修饰对应的blocks/elements。

示例：

 
 

   
   

    
    

   
   
   
   

    
    

     
     <!--正确的用法-->
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     <div class="block">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     <div class="block block--mod">...
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     <div class="block block--size-big block--shadow-yes">...
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     <!--不规范的用法-->
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     <div class="block--mod">...
     
     </div>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   
 
 

示例：

假如你有个block拥有两个modifier theme: "xmas" 和 simple: true ，以及两个elements input 和 submit ，并且element submit 具有自己的modifier disabled：true ，当form未填写完毕的时候不能进行提交。

HTML：

 
 

   
   

    
    

   
   
   
   

    
    

     
     <form class="form form--theme-xmax form--simple">
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     <input class="form__input" type="text"/>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     <input class="form__submit form__submit--disabled" type="submit"/>
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     </form>
    
    
   
   
 
 

CSS：

 
 

   
   

    
    

   
   
   
   

    
    

     
     .form { }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     .form--theme-xmas { }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     .form--simple { }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     .form__input { }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     .form__submit { }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     .form__submit--disabled { }