首先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>
- 把长度、颜色量好 注意这里的所有长度真实使用时需要减半!
*{
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来调整样式。