一篇关于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规范学习的一些理解，你们互相学习，有不少的不足之处但愿你们指出。还有不少没有学习到的东西，本身也会在将来的时间里不断学习来提升本身。

原文地址：http://www.javashuo.com/article/p-cxnwrfdg-gk.html