[干货]-BEM国际命名规范 +美团订单模块实战！！小白必学！

站长

2024年04月05日 19:31 · 阅读数 3

总览

JavaScript中的BEM命名规范
美团订单模块实战

正文

什么是BEM命名规范

BEM（块、元素、修饰符）是一种前端开发中的命名规范，旨在提高代码的可读性、可维护性和可协作性。BEM是由Yandex团队提出的一种前端CSS命名方法论，它使用简洁的命名规则来描述组件及其状态，使代码易于理解、易于维护、易于扩展和重构。

下面是BEM命名规范的一些要点：

块（Block）: 块是页面上的独立组件，具有明确的语义和功能。每个块都有自己的名称空间，以便与其他块进行区分。块名通常使用小写字母，单词之间可以使用短横线（-）分隔。例如：.block、.block-name
元素（Element）: 元素是组成块的子元素，通常用于定义块的内部结构和样式。元素名称以块名称为前缀，用双下划线（__）分隔。例如：.block__element、.block-name__element-name
修饰符（Modifier）: 修饰符是用于修改块或元素的行为或样式的标记。修饰符名称以块/元素名称为前缀，用双连字符（--）分隔。例如：.block--modifier、.block__element--modifier、.block-name__element-name--modifier
命名约定：在使用BEM时，建议遵循以下命名约定：
- 块名通常使用小写字母，单词之间可以使用短横线（-）分隔；
- 元素名以块名称为前缀，用双下划线（__）分隔；
- 修饰符名以块/元素名称为前缀，用双连字符（--）分隔。
BEM的实际应用：BEM在实际应用中，通常会结合其他一些前端开发技术，例如CSS预处理器（如Sass、Less等）、模块化开发等。这样可以更好地实现代码的组织和复用。

BEM命名规范如何连接？

双下划线（__）：用于分隔块名称与元素名称。例如： javascript .block__element{}
双连字符（--）：用于分隔块名称与修饰符或元素名称与修饰符。例如：.block--modifier{}或.element--modifier{}。
单中划线或单下划线（-）：连接由多个单词所构成的一个块或一个元素。例如：el-dialog或el\_name。也可以使用驼峰命名，例如：elName。

为什么要使用BEM命名规范？

提高代码的可读性和可维护性：BEM命名规则提供了一种清晰、一致的命名方式，使得代码更加易于阅读和理解。通过使用具有描述性的块和元素名称，以及适当的修饰符，可以更好地表达代码的功能和意图。
提高代码的可扩展性和可重用性：BEM鼓励使用组件化的思想，将代码分解为独立的块、元素和修饰符。这种模块化的方式使得代码更加可扩展和可重用。通过定义公共的块和元素，可以轻松地在不同的项目和场景中进行复用。
简化团队协作：BEM提供了一种统一的命名规范，使得不同开发人员在协作时能够更好地理解和维护代码。通过遵循相同的命名规则，可以减少沟通成本，提高团队协作效率。
提高代码的可维护性：BEM命名规则要求代码结构清晰、命名规范，这使得代码更加易于维护。当开发人员需要修改或扩展代码时，可以更加快速地找到相关的部分，并进行准确的修改。
学习和使用BEM需要一定的时间和经验：学习BEM命名规则需要理解其基本概念和原则，并掌握相关的技术和工具。通过不断地实践和应用，可以逐渐提高代码的质量和效率。

美团订单模块实战

首先拿到我们的美团订单模块：

[干货]-BEM国际命名规范 +美团订单模块实战！！小白必学！

我们要实现如何实现这样一个模块呢？

首先我们来对这一个模块进行分析：

这一模块只是美团应用中的一部分，对于这样一个模块我们可以命名为:mt-object

总体布局可以分为上下两部分：头部和身体,这里我们命名：mt-object__hd,mt-object__bd

head我们需要两个模块，我们把订单设为mt-object__title全部>设为mt-object__allnext

body每一个模块为一个item，我们命名为：mt-object__item但是每个项目都有会有一个状态小红点这个小红点我们命名为mt__status再给它添加一个状态mt__status--on 最终，我们对这个模块的分析就是这样：

[干货]-BEM国际命名规范 +美团订单模块实战！！小白必学！我们就可以开始进行我们html文件的编写了:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>美团实战</title>
    <link rel="stylesheet" href="./美团.css">
    <link rel="stylesheet" href="./iconfont.css">
</head>
<body>
    <div class="mt-object">
        <!-- 头部 -->
        <div class="mt-object__hd">
            <span class="mt-object__title">订单</span>
            <span class="mt-object__allnext">全部> </span>
        </div>
        <!-- 身体 -->
        <div class="mt-object__bd">
            <!-- href="#"是指超链接的目标URL为#，代表当前页面。这种写法通常用于临时链接或者在javascript中使用。当点击包含href="#"的链接时，页面不会刷新，也不会跳转到其他页面，而是会执行与链接相关的javascript代码 -->
            <!-- 待付款 -->
            <a href="#" class="mt-object__item">
                <span>
                <span class="iconfont icon-daifukuan"></span>
                <span class="mt__status"></span>
                </span>
                <p class="mt__desc">待付款</p>
            </a>
            <!-- 待收货 -->
            <a href="#" class="mt-object__item">
                <span>
                <span class="iconfont icon-daishouhuo"></span>
                <span class="mt__status"></span>
                </span>
                <p class="mt__desc">待收货</p>
            </a>
            <!-- 待使用 -->
            <a href="#" class="mt-object__item">
                <span>
                <span class="iconfont icon-shizhong"></span>
                <span class="mt__status"></span>
                </span>
                <p class="mt__desc">待使用</p>
            </a>
            <!-- 待评价 -->
            <a href="#" class="mt-object__item">
                <span>
                <span class="iconfont icon-daipingjia"></span>
                <span class="mt__status mt__status--on"></span>
                </span>
                <p class="mt__desc">待评价</p>
            </a>
            <!-- 退款/售后 -->
            <a href="#" class="mt-object__item">
                <span>
                <span class="iconfont icon-tuikuan"></span>
                <span class="mt__status"></span>
                </span>
                <p class="mt__desc">退款/售后</p>
            </a>


        </div>
    </div>
</body>
</html>

补充:❤️

<link rel="stylesheet" href="./iconfont.css">此处引入图标所再CSS文件

<span class="iconfont icon-daifukuan"></span>此处为引入图标

<span class="mt__status"></span>此处是item项目中的表示

好了！接下来的问题就是如何实现我们的美团.CSS文件了🤔

首先，我们要初始化全局：

*{
    margin: 0;
    padding: 0;
    /* 不同的浏览器margin不同，为了保持不同的浏览器体验一样 */
    outline: 0 ;/* input a 聚焦时或者高亮时用 重置样式，让样式无差别*/
    /* 把总大小变为content大小 */
    /* box-sizing: border-box; 盒子模型方式切换*/
}

对于a标签，我们要去掉它自动产生的下划线，否则页面上的图标和图标下的文字会出现下划线，因为body部分中的是可以点击的图标，所以我们使用a标签并且把它的下划线去掉！

a{
    text-decoration: none;/*text-decoration: none删除下划线
 在CSS中，使用text-decoration属性来定义段落文本的下划线、删除线和顶划线。none即为默认值，可以用这个属性值也可以去掉已经有下划线或删除线或顶划线的样式    */
}

对于整个body我们可以把它的背景色设置为绿色，与模块色不同即可方便观察，字符间距增加1px更加美观

body{
    background-color: #44ef10;
    letter-spacing: 1px;
    /* letter-spacing 属性增加或减少字符间的空白（字符间距）。 */
}

来到我们mt-object ,我们设置它的高度为body的95%，上边距设置为10px，下边距自动，背景色为白色，设置20px圆角，把四个角变为圆滑：
```
.mt-object{
    width:95%;
    margin:10px auto;
    background-color: white;
    border-radius: 20px;
}
```

对mt-object__hd进行设置，我们可以这样设置高度为64px，上下填充为0，左右填充为15px。使用弹性布局，且justify-content属性设置为space-between，让元素在主轴上平均分布，两端对齐，两端留白。align-items属性设置为center，让元素在交叉轴上居中显示。

.mt-object__hd{
    height:64px;
    padding:0 15px;
    display: flex;/*弹性布局*/
    justify-content: space-between;
    /* justify-content 属性定义浏览器如何沿着弹性容器的主轴和网格容器的行向轴分配内容元素之间和周围的空间。 */
    align-items: center;
}

mt-object__title标题我们设置字体大小为22px,字体加粗

.mt-object__title{
    font-size: 22px;
    font-weight:bold;
}

.mt-object__allnext我们设置字体大小为19px,字体颜色为灰色

.mt-object__allnext{
    font-size: 19px;
    color:gray;
}

.mt-object__bd身体部分高度为84px，并且使用了弹性布局。justify-content属性设置为space-around，在主轴上平均分布，两端留白。
```
.mt-object__bd{
    height:84px;
    display: flex;
    justify-content: space-around;
}
```
.mt-object__item元素的宽度为其父元素宽度的20%,文本居中对齐,行高为2em(在CSS中，em 是一个相对单位，通常相对于当前元素的字体大小。因此，2em 通常表示当前字体大小的两倍)文本的颜色为黑色,相对定位
```
.mt-object__item{
    width:20%;
    text-align: center;
    line-height:2em;
    color:black;
    position: relative;
}
```
.mt__desc文字大小为14px
```
.mt__desc{
    font-size: 14px;
}
```
.mt__status设置小红点高度为10px，宽度10px，绝对定位（相对于mt-object__item定位）顶部设置为-3px,右边设置为16px，再利用圆角50%将其变为一个圆
```
.mt__status{
    width:10px;
    height:10px;
    position: absolute;
    top:-3px;
    right:16px;
    /* 圆角 */
    border-radius: 50%;
}
```
.mt__status--on我们只需要设置当这个状态为on时，显示为小红点，所以我们只要设置背景色
```
.mt__status--on{
    background-color: red;
}
```

这样就设置好了我们的样式！

完整代码

*{
    margin: 0;
    padding: 0;
    /* 不同的浏览器margin不同，为了保持不同的浏览器体验一样 */
    outline: 0 ;/* input a 聚焦时或者高亮时用 重置样式，让样式无差别*/
    /* 把总大小变为content大小 */
    /* box-sizing: border-box; 盒子模型方式切换*/
}
a{
    text-decoration: none;/*text-decoration: none删除下划线
 在CSS中，使用text-decoration属性来定义段落文本的下划线、删除线和顶划线。none即为默认值，可以用这个属性值也可以去掉已经有下划线或删除线或顶划线的样式    */
}
body{
    background-color: #44ef10;
    letter-spacing: 1px;
    /* letter-spacing 属性增加或减少字符间的空白（字符间距）。 */
}
.mt-object{
    width:95%;
    margin:10px auto;
    background-color: white;
    border-radius: 20px;
}
.mt-object__hd{
    height:64px;
    padding:0 15px;
    display: flex;/*弹性布局*/
    justify-content: space-between;
    /* justify-content 属性定义浏览器如何沿着弹性容器的主轴和网格容器的行向轴分配内容元素之间和周围的空间。 */
    align-items: center;
}
.mt-object__title{
    font-size: 22px;
    font-weight:bold;
}
.mt-object__allnext{
    font-size: 19px;
    color:gray;
}
.mt-object__bd{
    height:84px;
    display: flex;
    justify-content: space-around;
}
.mt-object__item{
    width:20%;
    text-align: center;
    line-height:2em;
    color:black;
    position: relative;
}
.mt__desc{
    font-size: 14px;
}
.mt__status{
    width:10px;
    height:10px;
    position: absolute;
    top:-3px;
    right:16px;
    /* 圆角 */
    border-radius: 50%;
}
.mt__status--on{
    background-color: red;
}

但是还有一个问题便是！我们图标大小需要进行设置！！iconfont中的图标可以被我们手动设置成大小，我们只需要调节一下图标大小就好了！在iconfont.css文件中

.iconfont {
  font-family: "iconfont" !important;
  font-size: 36px;/*我们把这一行的大小调节为36px即可*/
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

最后效果!!

[干货]-BEM国际命名规范 +美团订单模块实战！！小白必学！

因为是手机端的界面，所以我们查看页面效果用手机端进行查看！！！

总结

BEM命名规则为程序员提供了一种高效、规范的代码组织方式，可以提高代码的可读性、可维护性和可扩展性，简化团队协作，并提高代码的可维护性。学习和使用BEM需要一定的时间和经验，但随着技术的不断发展和应用场景的不断扩大，BEM将会成为前端开发中不可或缺的一部分。

今天的学习就到这里结束啦！！如果有任何疑问和指正欢迎留言！！贡献一个小小的赞支持一下吧！🌹🌹🌹

图标来源：iconfont-阿里巴巴矢量图标库