從支付寶tabbar看BEM

good_morning發表於2018-10-03
tabBar

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

我們來看一個例子zfbui-tabbar__item
從這個名字我們能夠解讀出 支付寶介面  標籤欄   項
然後還能讀取出他們的之間相應的結構

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

這裡再詳細的介紹一下BEM

B(blcok):也就是塊的概念，也可以叫做元件，模組。

頁面是由多個元件一起拼接而成，他們相互獨立，互不干擾。在現代開發中
專案中大部分都是由通用元件構成。

E(element):元素

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

M(modifier):修飾符

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

下面我們來分析支付寶介面的TarBar

從支付寶tabbar看BEM

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

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

從支付寶tabbar看BEM

在上圖中我們可以很清晰的看到他們的結構 於是我們可以構建出BEM樹狀圖：

從支付寶tabbar看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元件吧

  1. 首先我們先把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>
複製程式碼
  1. 把長度、顏色量好 注意這裡的所有長度真實使用時需要減半!

從支付寶tabbar看BEM
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;                          
    
}
複製程式碼
  • 最後結果：

從支付寶tabbar看BEM

補充：上面的圖示來自阿里圖示庫：www.iconfont.cn/

方式為symbol引用:
是更值得推薦的用法，支援多色圖示，不再受單色限制。
通過一些技巧，支援像字型那樣，通過font-size,color來調整樣式。

相關文章