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的一下感覺，但願你們能夠有所收穫，其中可能有些不太恰當的地方，也但願你們能夠多給我提一些意見