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的一下感受,希望大家可以有所收获,其中可能有些不太恰当的地方,也希望大家可以多给我提一些意见