BEM的概念及作用

BEM是一种前端命名方法论，主要针对CSS,是Block（块）、Element（元素）、Modifier（修饰符）的简写。
这种命名方法让CSS便于统一团队的开发规范和方便维护，这也是为什么一些大厂都推崇使用BEM来命名。

BEM的用法

举个淘宝tabbar的例子：tbui-tabbar__item
从这个例子我们能够看出这是淘宝界面（设计）—标签栏__项
同时也能看出淘宝tabbar的结构
从上个例子中我们就可以隐约体会到BEM是如何用来命名的： Block-Element__MOdifier
- Block也可以分子区块（也可以称为组件或模块）,比如例子中的tbui-tabbar,表淘宝界面的标签栏
- Element可以认为是区块里的地位和作用，规定与块之间用__（两个英文状态下的下划线）连接：Block__Element
- Modifier修饰符，也可以认为是状态的修改，不能单独使用，一定要依赖块或元素，规定与元素之间用英文状态下的-连接：Block__Element_Modifier

BEM简单使用例子:淘宝界面tabbar

淘宝界面tabbar的截图

2. 命名

从上面的截图可以看的出来这个tabbar是一个块，区分成了四个项目（item），每个项它基本上是由三个元素即图标（icon）、标签（label）、小红点信息（badge）组成的，为元素命名的时候，便于理解我们可以根据元素的英文名来定义

构建tabbar的BEM结构图

图片1.png 在结构图中可以很清晰的看出被BEM规范后的命名：

区块 tbui-tabbar
区块分成了4个项目 tbui-tabbar__item
该项目由3个元素组成
- 图标 tbui-tabbar__icon
- 图标下方的标签 tbui-tabbar__label
- 图表右上角的小红点 tbui-tabbar__badge
区块里的项目都有被选中的状态 tbui-tabbar__time_on

html代码

     <!-- Block  tbui-tabbar模块 
     子元素，俩个下划线连接-->
     <div class="tbui-tabbar">
         <a href="#" class="tbui-tabbar__item tbui-tabbar__time_on">
             <span>
                 <svg class="tbui-tabbar__icon" aria-hidden="true" style="width:38px; height:45PX;">
                     <use xlink:href="#icon-shejiaotubiao-44"></use>
                 </svg>
             </span>
         </a>
         <a href="#" class="tbui-tabbar__item">
            <span>
                <svg class="tbui-tabbar__icon" aria-hidden="true">
                    <use xlink:href="#icon-weitao"></use>
                </svg>
                <span class="tbui-tabbar__badge ">···</span>  
                  <p class="tbui-tabbar__label">微淘</p>
            </span> 
            
        </a>
        <a href="#" class="tbui-tabbar__item ">
            <span>
                <svg class="tbui-tabbar__icon" aria-hidden="true">
                    <use xlink:href="#icon-gouwuche"></use> 
                </svg>
                <span class="tbui-tabbar__badge">···</span> 
                <p class="tbui-tabbar__label">购物车</p>
            </span>
          
        </a>
        <a href="#" class="tbui-tabbar__item ">
            <span>
                <svg class="tbui-tabbar__icon" aria-hidden="true">
                    <use xlink:href="#icon-wode"></use>
                </svg>
                <span class="tbui-tabbar__badge">···</span> 
            </span>
            <p class="tbui-tabbar__label">我的淘宝</p>
        </a>
     </div>

测量长度，选好颜色，长度真实使用时需减半

测量.png

编写css代码

    margin: 0;
    padding: 0;
}
a{text-decoration: none;}
a:link{
    color: #a2a2a2;
}
a:visited{
    color: #a2a2a2;
}
a:hover{
    color: #fd6f00;
}
a:active{
    color: #fd6f00;
}
.tbui-tabbar{
     display: flex;
     align-items: flex-end; /*设置了高度才能使用*/
    width: 100%;
    background-color:white;
    margin-right:40px;
    border-top: 1px solid rgb(235, 233, 233);
}
.tbui-tabbar__item{
    flex:1;
    text-align: center;
    padding: 3px;
    font-size: 0;
}
.tbui-tabbar__item >span{
    display: inline-block;
    position: relative;
}
.tbui-tabbar__icon{
    display: inline-block;
    width:22px;
    height: 22px;
    margin-top: 3px;
}
.tbui-tabbar__badge {
    position: absolute;
    min-width: 8px;
    top:-6px;
    right: -14.5px;
    padding:.2rem .4rem;
    font-size: 8px;
    line-height: 8px;
    border-radius: 14px;
    color: white;   
    background-color: red;
}
.tbui-tabbar__label{
    font-size: 8px;
    text-align:center;
    line-height: 8px;
}

最后结果
总结在写这个BEM的例子中，html代码是比较容易写出来的，而css代码里面的一些样式值则需要根据截图的测量值来调式，但是你自己用了规范BEM命名后，后续修改css也会更简单；除此之外，在这个例子我还有一个更深的体会，就是使用svg里面的use标签，真的好方便！！！大家都可以去尝试下，附带图标库链接：www.iconfont.cn/ （全是免费的！！！）

BEM--淘宝tabbar

BEM的概念及作用

BEM的用法

BEM简单使用例子:淘宝界面tabbar