BEM 实战之微信我的页面

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 项目地址：github.com/EIVE/wx_hom…
segmentfault 文章地址：segmentfault.com/a/119000001…

以上是我学习BEM的一下感觉，但愿你们能够有所收获，其中可能有些不太恰当的地方，也但愿你们能够多给我提一些意见