揭秘 BEM 命名法：让前端代码自解释的底层逻辑，90% 开发者都踩过的命名坑

最新推荐文章于 2025-05-02 21:13:07 发布

今天你慧了码码码码码码码码码码

最新推荐文章于 2025-05-02 21:13:07 发布

阅读量1k

点赞数 19

文章标签：前端 css

本文链接：https://blog.youkuaiyun.com/weixin_73042028/article/details/146213654

版权

在前端开发的领域中，随着项目规模的不断扩大，代码的复杂性也日益增加。如何编写易于理解、维护和扩展的代码，成为了每一位开发者都需要面对的重要课题。其中，CSS类名的命名规范起着举足轻重的作用，而BEM命名规范正是一种能有效提升代码质量的方法论。

什么是BEM？

BEM是块（Block）、元素（Element）、修饰符（Modifier）的缩写，它是一种用于命名CSS类的约定俗成的规范。通过将页面组件分解为这三个层级，使得代码结构更加清晰，语义更加明确。其核心公式为：block__element--modifier 。

块（Block）

块代表一个独立的、具有明确语义和功能的页面组件或模块。它是一个自包含的单元，可以在不同的项目部分中重复使用。块的名称应当具有描述性，能够概括该组件的整体功能或用途，并且在整个项目中应该是唯一的。例如，在一个网站中，导航栏是一个常见的组件，我们可以将其命名为 nav 。这个名称清晰地表明了该组件的功能，无论是开发者还是团队成员，都能一目了然地知道它的用途。

元素（Element）

元素是块内的具体组成部分，它们不能单独存在，必须依赖于所属的块。元素的名称通常用于描述其在块中的角色或功能，并且使用双下划线 __ 与块名称分隔开来。以导航栏为例，其中的链接是导航栏的重要组成部分，我们可以将其命名为 nav__link 。通过这种命名方式，我们可以清楚地知道这个元素是属于 nav 块的链接元素，增强了代码的可读性和可维护性。

修饰符（Modifier）

修饰符用于修改块或元素的外观、行为或状态。修饰符的名称通常描述其具体的修改方式，使用双连字符 -- 与块或元素名称分隔。继续以导航栏链接为例，当链接处于激活状态时，我们可以使用修饰符 --active ，完整的类名就是 nav__link--active 。这样，通过简单的类名就能知道该链接当前的状态，并且可以方便地为其定义相应的样式。

BEM命名规范实战示例

为了更直观地展示BEM命名规范的应用，让我们来看一个完整的导航栏示例。
在这里插入图片描述

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link type="text/css" rel="stylesheet" href="./test.css" />
</head>
<body>
    <!-- 导航栏块 -->
    <header class="nav-bar">
        <div class="nav-bar__content">
            <!-- 导航栏logo元素 -->
            <div class="nav-bar__logo">
                <a href=""><img src="./img/logo.png" class="nav-bar__img"></a>
            </div>
            <!-- 导航栏菜单元素 -->
            <div class="nav-bar__menu">
                <a href="" class="nav-bar__menu-item">功能特权</a>
                <a href="" class="nav-bar__menu-item">游戏特权</a>
                <a href="" class="nav-bar__menu-item">生活特权</a>
                <a href="" class="nav-bar__menu-item">会员活动</a>
                <a href="" class="nav-bar__menu-item">成长体系</a>
                <a href="" class="nav-bar__menu-item">年费专区</a>
                <a href="" class="nav-bar__menu-item">超级会员</a>
            </div>
            <!-- 导航栏操作元素 -->
            <div class="nav-bar__actions">
                <!-- 登录按钮元素，具有primary修饰符表示主要按钮 -->
                <a href="" class="nav-bar__action-button--primary">登录</a>
                <!-- 开通超级会员按钮元素，具有secondary修饰符表示次要按钮 -->
                <a href="" class="nav-bar__action-button--secondary">开通超级会员</a>
            </div>
        </div>
    </header>
</body>
</html>

在这段HTML代码中，我们使用BEM命名规范构建了一个导航栏。nav-bar 作为块，包含了 nav-bar__content 来组织内部元素。nav-bar__logo 是导航栏的logo元素，nav-bar__menu 及其子元素 nav-bar__menu-item 构成了导航菜单，而 nav-bar__actions 中的 nav-bar__action-button--primary 和 nav-bar__action-button--secondary 分别表示登录按钮和开通超级会员按钮，并且通过修饰符区分了它们的主次。

CSS样式

/* 去除body元素边距 */
body {
    margin: 0;
    padding: 0;
}

/* 导航栏块的样式 */
.nav-bar {
    height: 90px;
    background-color: #666666;
}

.nav-bar__img {
    height: 90px;
}

.nav-bar__content {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 导航栏菜单的样式 */
.nav-bar__menu {
    padding: 0 60px;
}

.nav-bar__menu-item {
    color: #fff;
    text-decoration: none;
    padding: 0 15px;
}

.nav-bar__menu-item:hover {
    color: blue;
}

/* 导航栏操作区域的样式 */
.nav-bar__actions {
    display: flex;
}

/* 导航栏按钮的基本样式 */
.nav-bar__action-button {
    display: block;
    height: 39px;
    border-style: solid;
    border-radius: 19.5px;
    border-width: 1px;
    text-decoration: none;
    text-align: center;
    line-height: 39px;
}

/* 主要按钮（登录按钮）的样式 */
.nav-bar__action-button--primary {
    width: 95px;
    border-color: #fad65c;
    color: #fad65c;
    background-color: transparent;
}

.nav-bar__action-button--primary:hover {
    background-color: #fad65c;
    color: #986b0d;
}

/* 次要按钮（开通超级会员按钮）的样式 */
.nav-bar__action-button--secondary {
    width: 142px;
    border-color: #fad65c;
    color: #986b0d;
    background-color: #fad65c;
    font-weight: 600;
    margin-left: 5px;
}

对应的CSS代码中，每个类名都遵循BEM规范，使得样式的定义与HTML结构紧密对应。通过这种方式，我们可以轻松地找到与特定元素相关的样式，并且在需要修改样式时，能够快速定位到对应的类名。例如，如果我们想要修改导航栏链接的样式，只需要找到 nav-bar__menu-item 相关的CSS规则即可。