从支付宝tabbar看BEM

7,775 阅读4分钟

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

  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. 把长度、颜色量好 注意这里的所有长度真实使用时需要减半!

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