1. BEM简介
BEM是对css命名的一种规范，将页面模块化，隔离样式，提高代码的复用性，减少后期的维护成本。BEM的意思就是
Block(块)、Element(元素)、Modifier(修饰符)，通过双下划线__或者双中划线--连接。
2. 为什么需要BEM命名法
隔离样式，避免css污染
BEM通过特殊的命名方式，给css创造一个“作用域”，能够有效避免css样式全局污染。例如：
// 普通命名
.title {}
// BEM命名
.juejin-hd__title {}
普通的命名方法，会作用于所有的
class="title"的后代元素，这样就会影响到你不想选择的元素，造成样式污染。
而BEM命名方法，只会作用于
class="juejin-hd__title"这一元素，不会影响其他元素，从而达到样式隔离的目的。
代码更易覆盖
当我们在进行组件开发时，打包后的
.juejin-hd后面的哈希值是动态的，方便修改。
代码可读性更好
用BEM命名法，让我们在写代码时能够快速地定位到样式位置，更重要的是在进行团队开发时，让同伴们更容易读懂自己的代码。
3. 如何使用BEM命名法
- 用
page-开头，表示这是一个页面，而不是组件。- 用
base-开头, base表示公共组件。- 用
the-开头, the表示某一特定组件。
命名语义化，可以根据模块的功能而命名，如页面头部
header、导航栏nav、主体main、侧边栏sidebar、底部footer等，这样整个页面看起来就比较清晰了，维护起来也比较方便。
4. BEM案例-掘金功能模块
接下来让我们用BEM命名法来写一下移动端掘金功能模块的结构吧...
首先我们来分析一下上图功能模块的结构：
整个功能模块我们可以命名为
juejin-fm。
功能模块主要由两部分组成：头部和主体部分。
头部可以命名为
juejin-fm__hd，其中标题命名为juejin-fm__title。
主体部分可以命名为
juejin-fm__bd，其中的7个小模块命名为juejin-fm__item。
html代码：
<div class="juejin-fm">
<div class="juejin-fm__hd">
<span class="juejin-fm__title">更多功能</span>
</div>
<div class="juejin-fm__bd">
<a href="#" class="juejin-fm__item">
<img src="./icon/wodekecheng-.png" alt="">
<p class="desc">我的课程</p>
</a>
<a href="#" class="juejin-fm__item">
<img src="./icon/chuangzuozhezhongxin.png" alt="">
<p class="desc">创作者中心</p>
</a>
<a href="#" class="juejin-fm__item">
<img src="./icon/wodequanzi.png" alt="">
<p class="desc">我的圈子</p>
</a>
<a href="#" class="juejin-fm__item">
<img src="./icon/yuedujilu.png" alt="">
<p class="desc">阅读记录</p>
</a>
<a href="#" class="juejin-fm__item">
<img src="./icon/biaoqian.png" alt="">
<p class="desc">标签管理</p>
</a>
<a href="#" class="juejin-fm__item">
<img src="./icon/jianliguanli.png" alt="">
<p class="desc">简历管理</p>
</a>
<a href="#" class="juejin-fm__item">
<img src="./icon/yijianfankui.png" alt="">
<p class="desc">意见反馈</p>
</a>
</div>
</div>
css样式:
* {
margin: 0;
padding: 0;
}
body {
background-color: rgba(211, 209, 209, 0.25);
}
a{
text-decoration: none;
}
.juejin-fm {
width: 94%;
margin: 10px auto;
background-color: #fff;
border-radius: 10px;
}
.juejin-fm__hd {
padding: 10px;
}
.juejin-fm__title {
font-size: 18px;
font-weight: bold;
}
.juejin-fm__bd {
padding: 10px;
display: flex;
flex-wrap: wrap;
}
.juejin-fm__item {
width:25%;
text-align: center;
line-height: 2.1em;
color: black;
padding-bottom: 10px;
}
img {
width: 30px;
height: 30px;
}
.desc {
font-size: 14px;
font-weight: 500;
font-family: sans-serif;
}
移动端页面结果如下：
图标来自：iconfont-阿里巴巴矢量图标库
5. 总结
使用BEM命名方法能够减少样式污染，提高代码的复用性，能一定程度上提高团队的开发效率，减少后期软件的维护成本。
参考文档：
