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

农民 · 2025-4-6 18:05:54

在前端开辟的领域中，随着项目规模的不停扩大，代码的复杂性也日益增加。如何编写易于理解、维护和扩展的代码，成为了每一位开辟者都必要面临的重要课题。其中，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">
<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">
<a href="" class="nav-bar__action-button--primary">登录</a>
<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规则即可。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

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

本帖子中包含更多资源

0 个回复

快速回复

楼主热帖

标签云

浏览过的版块