首先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是一個塊，很明顯的區分了5個項，能夠發現每個項他都是由三個元素組成。
這樣我們就可以先給他們取好獨立的名字：
項 item
圖示 icon
標籤 label
小紅點 badge
那我們命名完成了，那我們再來梳理一下他們的結構
在上圖中我們可以很清晰的看到他們的結構於是我們可以構建出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;
}複製程式碼- 最後結果：
補充：上面的圖示來自阿里圖示庫：www.iconfont.cn/
方式為symbol引用:
是更值得推薦的用法，支援多色圖示，不再受單色限制。
通過一些技巧，支援像字型那樣，通過font-size,color來調整樣式。