BEM

写在前面

在现代前端开发中，保持代码的可读性和可维护性是至关重要的。BEM（Block Element Modifier）命名法是一种流行的前端命名约定，它能够帮助开发者构建清晰、结构化的HTML和CSS代码。本文将介绍BEM命名法的基本概念，并通过实际例子演示如何应用BEM命名法，提高前端项目的开发效率和代码质量。

什么是BEM命名法？

BEM是一种命名约定，它将页面拆分成独立的块（Block）、元素（Element）、修饰符（Modifier）。通过统一的命名规则，BEM帮助开发者更好地组织HTML和CSS，减少命名冲突，增加代码的可读性和可维护性。

Block（块） ：独立的、可复用的组件，是一个顶级的命名空间，例如：.button。
Element（元素） ：块内的部分，具有特定功能并且依赖于块的存在，例如：.button__label。
Modifier（修饰符） ：块或元素上的修饰符，用于改变外观或行为，例如：.button--primary。

BEM命名法的优势

1. 清晰的结构

BEM命名法使得HTML结构清晰可见。通过命名约定，我们可以迅速了解一个元素是属于哪个块，以及是否有相关的修饰符。

2. 避免命名冲突

BEM通过命名空间的划分，有效避免了不同组件之间的命名冲突。每个块都是独立的，不会受到外部样式的影响。

3. 易于维护

清晰的命名规则使得代码易于维护。新的开发者可以迅速理解结构，旧的开发者也能够轻松找到需要修改的部分。

实际应用：12306订单栏

HTML样式

<div class="hc-order">
    <div class="hc-order__hd">
        <span class="hc-order__title">火车票订单</span>
        <span class="hc-order__tips"><u>温馨提示</u></span>
    </div>
    <hr>
    <div class="hc-order__bd">
        <span>
        <a href="#" class="hc-order__item">
            <img class="hc-order__img" src="待支付.png">
            <p class="hc__desc">待支付</p>
        </a></span>
        <span>
            <a href="#" class="hc-order__item">
                <img class="hc-order__img" src="已支付.png">
                <p class="hc-order__desc">已支付</p>
            </a>
        </span>
        <span>
            <a href="#" class="hc-order__item">
                <img class="hc-order__img" src="任务.png">
                <p class="hc-order__desc">候补订单</p>
            </a>
        </span>
        <span>
            <a href="#" class="hc-order__item">
                <img class="hc-order__img" src="发票管理.png">
                <p class="hc-order__desc">本人车票</p>
            </a>
        </span>
    </div>
</div>

CSS结构

*{
    margin: 0;
    padding: 0;
}
a,a:link{
    text-decoration: none;
    color: #000;
}
body{
    background-color:#4074f8;
    letter-spacing: 1px;
}
.hc-order{
    width: 500px;
    height: 140px;
    margin: 10px auto;
    background-color: #fff;
}
.hc-order__hd{
    height: 40px;
    padding: 0 15px;
    display: flex;
    justify-content:space-between;
    align-items: center;
}
.hc-order__title{
    font-size: 20px;
    font-weight: bold;
}
.hc-order__tips{
    font-size: 15px;
    color: #3491e9;
}
.hc-order__bd{
    padding-top: 15px;
    height: 30px;
    display: flex;
    justify-content: space-around;
}
.hc-order__item{
    width: 20%;
    text-align: center;
    line-height: 2em;
    position: relative;
}
.hc-order__img{
    padding-left: 5px;
    height: 100%;
    width: 40px;
}
.hc-order__desc{
    font-size: 15px;
}

最终效果：

以下是对上述代码中BEM命名的解释和说明：

Block（块） :

.hc-order: 整个订单容器是一个块。

Element（元素） :

.hc-order__hd: 订单头部是块.hc-order的元素。
.hc-order__title: 订单标题是元素.hc-order__hd的子元素。
.hc-order__tips: 温馨提示链接也是元素.hc-order__hd的子元素。
.hc-order__bd: 订单主体是块.hc-order的元素。
.hc-order__item: 每个订单项目是元素.hc-order__bd的子元素。
.hc-order__img: 每个订单项目中的图像是元素.hc-order__item的子元素。
.hc-order__desc: 每个订单项目的描述是元素.hc-order__item的子元素。

Modifier（修饰符）：

上述代码虽然没有体现，但在实际应用中，它经常需要在已经定义好的块或者元素上，做一些小调整来满足特定的小功能。

结语

BEM命名法是前端开发中非常实用的命名约定，它通过清晰的结构、避免命名冲突、易于维护等优势，帮助开发者构建高质量的前端代码。通过掌握BEM命名法，你能够更加高效、规范地开发前端项目，提高团队协作的效率，确保项目的可维护性和可扩展性。

探寻前端的命名艺术：BEM规范解析与实战

BEM