1.BEM 简介BEM——前端命名方法论BEM 是由 Yandex 团队提出的一种前端命名方法论，是一个非常有用，强大，简单的命名约定，可以让你的前端代码更容易阅读和理解，更容易协作，更容易控制，更加健壮和明确而且更加严密。BEM 命名约定模式.block{}.block__element{}.block--modifier{}其中.block：表示一个抽象的块，或一个独立的组件.block__element：element是.block的子节点，表示element属于某个.block，用于形成一个完整的.block整体，__是向下降级的意思.block--modifier：表示某个节点的状态2.微信个人页面实战为了更清楚感受BEM的命名方式，我仿制了一下微信的个人页面，其中图标来自Iconfont矢量图标库,图标命名直接使用其原始的命名一开始我设计的html，此时我对BEM有些认识，但是使用上还是有点问题，这时，我将整个页面看作一个模块分为三部分：page__hd，page__bd，page__ft<div class="page me"> <div class="page__hd"> <div class="page__hd__title">微信</div> <div class="page__hd__functionIcon"> *** </div> </div> <div class="page__bd"> <div class="bd__userInfo"> <div class="userInfo__img"> *** </div> <div class="userInfo__content right"> <div class="userInfo__content__detail"> *** </div> <div class="userInfo__content__QR"> *** </div> </div> </div> <div class="page__bd__list"> <ul> <li class="item item--top"> *** </li> <li class="item"> *** </li> *** <li class="item item--bottom"> *** </li> </ul> </div> </div> <div class="page__ft"> <div class="section__first"> *** </div> <div class="section__second"> *** </div> <div class="section__third"> *** </div> <div class="section__fourth"> *** </div> </div></div>但当一个模块内的部分多了些的时候，比如page__bd内部的元素，我觉得我的命名有些混乱，为了给它命名还得百度翻译，而且开始命名完后写css时发现自己还是不太清楚它的位置，写完css后发现还有有些没有使用上的类名比如.right我修改了我的html命名，感觉上结构更加清晰而且观察了一下微信的页面，头部和底部是不变的，每个页面都是一样的，还有page__bd内的page__bd__list在微信的发现页面也是开始可以使用的，这样的命名就比较好复用。<!-- 微信移动端我的页面 --><div class="page me"> <div class="page__hd"> <div class="page__title">微信</div> <div class="page__hd__icon--right"> <i class="iconfont icon-weixinsousuoicon"></i> <i class="iconfont icon-yiqiatongweixinduanICON_jiahao"></i> </div> </div> <div class="page__bd"> <div class="page__bd__header"> <img src="./static/images/user.jpg" alt="" class="bd__header__img"> <div class="bd__header__info"> <div class="info__content--left"> <p class="username">EIVE</p> <p class="wxnumber">w1074418022</p> </div> <div class="info__content--right"> <i class="iconfont icon-erweima"></i> </div> </div> </div> <div class="page__bd__list"> <ul> <li class="list__item list__item--top"> <i class="iconfont icon-qianbao"></i> <a>钱包</a> </li> <li class="list__item"> <i class="iconfont icon-0021"></i> <a>收藏</a> </li> <li class="list__item"> <i class="iconfont icon-xiangce-copy"></i> <a>相册</a> </li> <li class="list__item"> <i class="iconfont icon-qiabao"></i> <a>卡包</a> </li> <li class="list__item"> <i class="iconfont icon-xiaolian"></i> <a>表情</a> </li> <li class="list__item list__item--bottom"> <i class="iconfont icon-shezhi"></i> <a>设置</a> </li> </ul> </div> </div> <div class="page__ft"> <div class="ft__item"> <i class="iconfont icon-qipao"></i> <p>微信</p> </div> <div class="ft__item"> <i class="iconfont icon-tongxunlu"></i> <p>通讯录</p> </div> <div class="ft__item"> <i class="iconfont icon-find"></i> <p>发现</p> </div> <div class="ft__item ft__item--focus"> <i class="iconfont icon-wo1"></i> <p>我</p> </div> </div></div>3.总结一下我使用 BEM 命名的感受第一：让你的代码更容易阅读和理解，可以清晰的指出某个节点属于哪个块下，层级关系比较明显，也尽量避免使用节点承载的内容来定义节点，这样更好的复用某个模块第二：BEM 的降级关系不需要迫切的去使用，比如page__hd内的.title，因为一个页面只有一个title，所以使用page__title就可以代表，不需要使用page__hd__title第三：使用BEM是为了让我们的代码更清晰，更易维护，如果它使得你的代码更难维护，更难理解，也不必纠结github 项目地址：https://github.com/EIVE/wx_ho...以上是我学习BEM的一下感受，希望大家可以有所收获，其中可能有些不太恰当的地方，也希望大家可以多给我提一些意见
