前言
先来说说为什么写这篇文章吧，作为未来的前端开发工程"狮"，开发效率是很重要的，新手在写页面时，对于页面结构一般不会有太大的问题，主要还是在取类名时浪费时间，而且元素之间不关联，每个取独立名字，这样达不到企业的开发标准，效率不高，其他开发者可能css都写完了，我们还在取类名。所以我们学一下BEM命名国际规范，按照他的标准去取类名，可以让我们提前感受大厂的开发规范，也提高我们自己的开发效率。
什么是BEM
BEM（Block Element Modifier）作为一种高效的前端组件化开发方法，其核心在于通过标准化的命名规则提升代码的可读性和可维护性。对于新手来说，掌握BEM的命名逻辑确实需要一些时间，但一旦熟悉，它能显著提高开发效率，尤其是在大型项目中。以下是一些BEM命名规范的关键点和应用实例：
- Block（区块） ：代表页面上的一个独立功能区域或组件，如导航(
nav)、内容区域(content)等。块名通常反映其功能或内容，无需体现样式或布局信息。 - Element（元素） ：构成块的子部件，无法独立于块存在。元素与块的关系通过双下划线
__表示，如导航条内的一个链接项(nav__item)。这有助于明确元素间的关系，减少命名冲突。 - Modifier（修饰符） ：用于描述块或元素的不同状态、外观或行为变化。修饰符通过双破折号
--与块或元素相连，如一个带有强调样式的按钮(btn--emphasized)。修饰符有助于灵活控制UI表现，同时保持代码的清晰度。
实战分析模块
我们来看一下小破站的服务模块总体结构吧！
下面的是自己做的结构，然后顺带分析了一波。（有点简陋，重在BEM！！）
很容易看出这个模块的功能。它主要有一个整体block区块，明确反映这个板块的功能，我们用一个div取名为Server代表此区域为服务模块。
然后在其内部分为上下两部分，一个__hd 一个__bd，通常我们习惯在一个区块内分为头部、中间mian的主要部分，以及有一个尾部，且总是在区块内以这三部分为主。这里的结构分为上下部分，所有取名为Server__hd,Server_bd,前面表示项目块，两个下划线后面接着该部分为区块内的哪一部分。
这样就能体现Element子元素 与块的关系通过双下划线__表示。
在深入解构每一个部分有什么，首先我们来分析上面部分Server__hd:
因为这个title标题推荐服务只起到一个解释的作用，还有右边的 更多 >，我们可以用两个行内元素去表示，如span和a标签,它们刚好可以在同一行显示，我们只需要将a链接往右边摆就行了！html代码就像下面这样：
其次就是分析Server__bd下面部分，我们可以看到每行有四个水平摆放的服务项目，因多个项目服务可以用一个Server__items来代表这个区块，然后在内部放上四个div标签，就像如下：
在内部每一个小盒子的类名都属于一个item，且都有不同的Server__item，这样方便写他们的共同样式和不同样式，也有利于他们的结构区分。并且这样做还有好处可以让Server__items成为一个flex弹性容器，CSS样式加入display: flex;
为什么这样做呢？因为弹性布局针对的就是父元素和子元素之间的布局 ，它会将子元素全部凑在一起，放在同一行去展示。这里提到了弹性布局，就不得不多解释一下dispaly:flex;了,请看下面：
display: flex; 是一个CSS属性，用于建立一个flex布局的上下文。它为复杂的网页布局提供了一个更加有效和灵活的方式，使得开发者能更容易地创建响应式和自适应的设计。 当一个容器的display属性设置为flex时，这个容器就变成了一个flex容器，其直接子元素自动成为flex项目（flex items）。对于这些项目，你可以使用各种flex相关的属性来控制它们的布局行为，例如：
justify-content控制主轴上的对齐方式（项目的水平排列）。align-items控制侧轴上的对齐方式（项目的垂直排列，如果默认的主轴是水平的话）。flex-direction定义项目的排列方向（行或列）。flex-wrap控制项目是否换行。align-content多行flex容器中侧轴对齐方式。- 在flex项目上，可以使用
flex-grow,flex-shrink, 和flex-basis来控制项目的放大、缩小以及基础大小
当我们让容器变为flex容器后，这个竖直排放就轻易解决了！！
好了，BEM的命名规范大概就是这样了，虽然类名可能会很长，但是，在大项目内，清晰的项目结构，语义化的类名让代码更加易懂，项目迭代起来更加高效。
实战代码如下：
xml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bilibili服务中心</title>
<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4567397_xmoxq0fk9pk.css">
<style>
/*css reset*/
*{
margin:0;
padding: 0;
}
a{
text-decoration: none;
}
body,html{
height: 100%;
-webkit-tap-highlight-color: transparent;
background-color: rgb(4, 138, 228);
}
.Server{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
height: 100px;
margin: 20px;
border-radius: 5px;
}
.Server__hd{
width: 100%;
margin: 10px;
}
.Server__title{
font-size: 18px;
font-weight: 700;
}
.Server__more{
font-size: 14px;
position: absolute;
right: 10px;
}
.Server__items{
display: flex;
justify-content: space-around;
}
.item{
text-align: center;
font-size: 12px;
}
.item_img{
margin-bottom: 5px;
}
</style>
</head>
<body>
<div class="Server">
<div class="Server__hd">
<span class="Server__title">
推荐服务
</span>
<a href="#" class="Server__more">
更多
<i class="iconfont icon-xiangyoujiantou"></i>
</a>
</div>
<div class="Server__bd">
<div class="Server__items">
<div class="item Server__item1">
<p class="item_img"><i class="iconfont icon-wodekecheng"></i></p>
<p class="item_cont">我的课程</p>
</div>
<div class="item Server__item2">
<p class="item_img"><i class="iconfont icon-wode_wodezhibo"></i></p>
<p class="item_cont">我的直播</p>
</div>
<div class="item Server__item3">
<p class="item_img"><i class="iconfont icon-gexingzhuangban"></i></p>
<p class="item_cont">个性装扮</p>
</div>
<div class="item Server__item4">
<p class="item_img"><i class="iconfont icon-wodeqianbao"></i></p>
<p class="item_cont">我的钱包</p>
</div>
</div>
</div>
</div>
</body>
</html>总结
虽然代码简单，布局简陋，但是我们学会了BEM命名规范啊！这才是我们的重点，项目实战只是我们对布局的一些复习。想要成为一个高效的开发工程师，没有一点手段是不行的，传统的开发模式已经满足不了现代的开发需求了，所以我们得尽快提升自己的，能力很重要，高效率更加重要！