一篇关于BEM命名规范

一直以来自己对命名都是比较混乱的，并没有一个比较好的格式来命名，最近自己碰巧学习到了BEM命名规范，我想谈谈自己的理解以供自己来学习，同时也可以和各位大佬一起学习。
BEM是一个很有用的方法可以创建复用组件和前端代码
有三个特性.

1. 易用性，使用BEM只需要使用BEM的命名规范就可以。
2. 单元性，使用独立的块和CSS选择器，可以使你的代码可重用和单元化。
3. 灵活性，使用BEM后，方法和工具可以按照自己喜欢的方式去组织和配置。

   BEM的简介
   BEM是一个强大而简单的命名规范，使得代码更容易让人理解，容易和他人协作，容易扩展，更加强壮和明确，最重要的是严谨性。
   BEM的命名规范可以让参与网站开发的人都使用同一个代码库使用用一种方法。

BEM分别是块（Block），元素（Element），修饰符（Modifier）

• 块（Block）
  是一个独立的页面组件跟其他的块区分开来，相当于网页中的组件Block封装了行为，模板，样式和其他技术。独立的Block可以复用，促进项目的开发。

  1. 模块与模块之间可以嵌套，可以有任意级别的嵌

     
     <div class="header">
         <div class="logo"></div>
         <div class="search"></div>
     </div>
     

  2. 可以任意移动

>>
    Block可以在页面内任意的移动，也可以在页面之间或项目之间移动。  
    Block作为独立的实体来实现，使得在页面上改变Block改变位置并让其位置和外观不改变的简单。  
3. 可复用  
    一个界面可以同一个Block的几个实例

• 元素（Element）
  元素是模块Block的重要组成部分，且不能脱离模块单独的使用

  
  元素的名称用来描述它的目的  
  一个完整的元素结构block-name__element-name,块名和元素名使用（__）双下划线分割。
  

  • 元素之间是可以嵌套的
  • 可以拥有任意级别的嵌套
  • 一个元素总是模块Block的一部分这意味着元素名称不能为block__element__element这种结构，而block__element这种结构才是正确的。

  
   <div class="weui-tabbar">
      <div class="weui-tabbar__item">
          <span>
              <img src=" " alt="" class="weui-tabbar__icon">
          </span>
          <p class="weui-tabbar__label"></p>
      </div>
  </div>
  

-可以在不改变元素的情况下改变DOM结构

<div class="weui-tabbar">
<div href="#" class="weui-tabbar__item">
<span>
<img src=" " alt="" class="weui-tabbar__icon">
</span>
</div>
<p class="weui-tabbar__label"></p>
</div>

-一个元素总是模块的一部分，不能单独的使用。如下weui-tabbar模块里面的p标签元素放在模块外，这是不正确的。

<div class="weui-tabbar">
<div class="weui-tabbar__item">
<span>
<img src=" " alt="" class="weui-tabbar__icon">
</span>
</div>
</div>
<p class="weui-tabbar__label"></p>

-元素是可选择的，不是所有模块都必须拥有元素

• 修饰符（Modifier）
  Modifier是BEM的一个实体，它定义了block或element的行为或外观
  Modifier可用可不用
  Modifier本质和html的属性很相似，同一个block会因为使用Modifier而与之前看起来不一样。
  -修饰符的名字与模块和元素的名字使用（_）单下划线
  命名模式遵循如下格式:

  • Boolean类型的修饰符
    <font color=green>block-name_modifier--name</font>
    <font color=green>block-name__element-name--modifier-name</font>

    
    <!--当模块weui-tabbar有一个focused的boolean类型的修饰符时-->
    <div class="weui-tabbar weui-tabbar--focused">
    当元素weui-tabbar__item有一个on类型的修饰符时
        <div class="weui-tabbar__item weui-tabbar__item--on">
        </div>
    </div>
    

    • key-value类型的修饰符

<font color=green>block-name--modifier-name--modifier-value</font>  
<font color=green>block-name__element-name--modifier-name--modifier-value</font>

<!--当模块weui-tabbar有一个值为yes的test的修饰符时-->
<div class="weui-tabbar weui-tabbar--test--yes">
当元素weui-tabbar__item有一个yes的test的修饰符时
<div class="weui-tabbar__item weui-tabbar__item--test--yes">
</div>
</div>

>-一个修饰符不能单独的使用
>>一个修饰符不能脱离模块或元素单独的使用，一个修饰符应该改变一个实体的外观，行为或者状态，而不是替换它。

<!--正确的方法-->
<div class="weui-tabbar">
<div class="weui-tabbar__item weui-tabbar__item--on">
</div>
<!--错误的使用-->
<div class="weui-tabbar">
<div class="weui-tabbar__item--on">
</div>

以上是我经过对BEM规范学习的一些理解，大家互相学习，有很多的不足之处希望大家指出。还有很多没有学习到的东西，自己也会在未来的时间里不断学习来提高自己。

原文地址：https://segmentfault.com/a/1190000017052031