从支付宝tabbar看BEM

首先BEM是什么意思？

BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由Yandex团队提出的一种前端命名方法论，是一种 CSS命名规范

• 在命名中就赋予他们更多的意义，并且体现了他们的关系。
  ----->这恰恰就让你的代码更为友好，更加容易维护。
• 此外，命名变长后，他的命名同时也就变得更加的特殊，在上下文中更加稳定，不会干扰其他组件的样式 也就是提高了组件的独立性。
• 而且在写CSS样式时能够直接找到类名。

B(blcok):也就是块的概念，也可以叫做组件，模块。

页面是由多个组件一起拼接而成，他们相互独立，互不干扰。在现代开发中

项目中大部分都是由通用组件构成。

E(element):元素

他在块中承担的职责（唯一性的名字），并不是简单的父子关系

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组件吧

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>
复制代码

2. 把长度、颜色量好注意这里的所有长度真实使用时需要减半!

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来调整样式。