BEM 實戰之微信個人頁面

EIVE發表於2017-11-29

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的一下感受，希望大家可以有所收穫，其中可能有些不太恰當的地方，也希望大家可以多給我提一些意見

相關文章