從支付寶tabbar看BEM

時間 2019-11-06

標籤支付寶 tabbar bem 简体版

原文原文鏈接

首先BEM是什麼意思？
BEM的意思就是塊（block）、元素（element）、修飾符（modifier）,是由Yandex團隊提出的一種前端命名方法論，是一種 CSS命名規範
前端

咱們來看一個例子zfbui-tabbar__item
從這個名字咱們可以解讀出 支付寶界面 標籤欄 項
而後還能讀取出他們的之間相應的結構bash

在命名中就賦予他們更多的意義，而且體現了他們的關係。
----->這偏偏就讓你的代碼更爲友好，更加容易維護。
此外，命名變長後，他的命名同時也就變得更加的特殊，在上下文中更加穩定，不會干擾其餘組件的樣式也就是提升了組件的獨立性。
並且在寫CSS樣式時可以直接找到類名。

這裏再詳細的介紹一下BEM

B(blcok):也就是塊的概念，也能夠叫作組件，模塊。
框架

頁面是由多個組件一塊兒拼接而成，他們相互獨立，互不干擾。在現代開發中
項目中大部分都是由通用組件構成。
svg

E(element):元素字體

他在塊中承擔的職責（惟一性的名字），並非簡單的父子關係
如：zfbui-tabbar__item_on 這裏要注意是兩個下劃線__flex

M(modifier):修飾符ui

也就是狀態的修改。它不能單獨使用，必定要依賴於塊或元素
如： __item_on (一個下劃線)spa

下面咱們來分析支付寶界面的TarBar

很顯然這個tabbar是一個塊，很明顯的區分了5個項，可以發現每一個項他都是由三個元素組成。
這樣咱們就能夠先給他們取好獨立的名字：
項 item
圖標 icon
標籤 label
小紅點 badge
code

那咱們命名完成了，那咱們再來梳理一下他們的結構cdn

在上圖中咱們能夠很清晰的看到他們的結構因而咱們能夠構建出BEM樹狀圖：

這個時候用BEM把他們規範後：
zfbui-tabbar__item
zfbui-tabbar__icon
zfbui-tabbar__label
zfbui-badge（因爲這個badge在頁面的其餘組件沒有使用且比較特殊故可簡化）

在一個item被選中時咱們發現他是藍色的與其餘item不一樣，在BEM規範中，對於元素狀態的修改咱們能夠用zfbui-tabbar__item_on來修飾，這是使用Modifier的一個真實場景。

在用BEM構建出他們的框架和命名後，想必你的腦海中也對支付寶的tabbar結構有一個清晰的認識了吧

Nice 接下來咱們就開始本身動手作一個tabbar組件吧

首先咱們先把HTML結構完成。

<!-- BEM命名規範 -->
    <!-- tabbar模塊 Block 
      tabbar__item子元素兩個下劃線  -->
    <div class="zfbui-tabbar">
        <a href="#" class="zfbui-tabbar__item zfbui-tabbar__item_on">
            <span>
                    <svg class="zfbui-tabbar__icon" aria-hidden="true">
                            <use xlink:href="#icon-rectangle390"></use>
                          </svg>
                <span class="zfbui-badge">8</span>
            </span>
            <p class="zfbui-tabbar__label">首頁</p>
        </a>
        <a href="#" class="zfbui-tabbar__item">
            <span>
                    <svg class="zfbui-tabbar__icon" aria-hidden="true">
                            <use xlink:href="#icon-yiban"></use>
                          </svg>
                <span class="zfbui-badge">-</span>
            </span>
            <p class="zfbui-tabbar__label">財富</p>
        </a>
        <a href="#" class="zfbui-tabbar__item">
            <span>
                    <svg class="zfbui-tabbar__icon" aria-hidden="true">
                            <use xlink:href="#icon-tansuoa"></use>
                          </svg>
                <span class="zfbui-badge">-</span>
            </span>
            <p class="zfbui-tabbar__label">口碑</p>
        </a>
        <a href="#" class="zfbui-tabbar__item">
            <span>
                    <svg class="zfbui-tabbar__icon" aria-hidden="true">
                            <use xlink:href="#icon-shejiao"></use>
                          </svg>
                <span class="zfbui-badge">-</span>
            </span>
            <p class="zfbui-tabbar__label">朋友</p>
        </a>
        <a href="#" class="zfbui-tabbar__item">
            <span>
                    <svg class="zfbui-tabbar__icon" aria-hidden="true">
                            <use xlink:href="#icon-wode"></use>
                          </svg>
                <span class="zfbui-badge">-</span>
            </span>
            <p class="zfbui-tabbar__label">個人</p>
        </a>
    </div>
複製代碼

把長度、顏色量好注意這裏的全部長度真實使用時須要減半!

3. 再把CSS結構補充

*{
    margin: 0;
    padding: 0;
}

a:link {
    color: #a2a2a2;
}
a:vistied{
    color: #a2a2a2;
}
a:hover {
    color: #509ff1;
}
a:active {
    color: #509ff1;
}

.zfbui-tabbar {
    display: flex;
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 500;
    background-color: #ffffff;
    border-top: 1px solid #dddddd;
}
.zfbui-tabbar__item {
    flex: 1;                         /*子元素flex設置爲等比例1:1:1*/
    text-align: center;             /*快速讓水平內容居中*/
    padding: 8.5px 6px 6px ;               /*順時針，上右下左，缺乏一個即 上 左右 下*/
    font-size: 0;
    color: #a2a2a2;
    text-decoration: none;
}
.zfbui-tabbar__item > span {
    display: inline-block;
    position: relative;                        /*方便badge進行絕對定位*/
}
.zfbui-tabbar__icon {
    display: inline-block;                    /*行內元素是不能設置寬高 設置爲inline-block以便設置寬高*/
    width: 22px;
    height: 22px;
    fill: currentColor;
    overflow: hidden;
    margin-bottom: 3.5px;
}
.zfbui-badge {
    position: absolute;
    top: -2px;
    right: -13px;
    min-width: 8px;
    display: inline-block;
    padding: .15em .4em;                        /* 上下.15  左右.4*/
    font-size: 12px;
    line-height: 12px;
    background-color: #F43539;
    border-radius: 18px;                        /*盒子圓角，超出盒子長寬的的話，就會變成圓形*/
    color: white;
}
.zfbui-tabbar__label {
    font-size: 10px;
    text-align: center;
    line-height: 10px;                          
    
}
複製代碼