BEM模块化命名策略

CSS BEM命名系统：构建可维护的前端架构

在现代前端开发中，随着项目规模的不断扩大和团队协作的日益复杂，CSS 的组织和维护成为了一个重要挑战。CSS BEM（Block-Element-Modifier）命名方法论应运而生，为开发者提供了一套清晰、系统化的 CSS 命名规范，有效解决了样式冲突、可维护性差等问题。

王圆圆

王圆圆

— 9 min read
CSS BEM命名系统：构建可维护的前端架构

什么是 BEM？

BEM 是一种基于组件的 Web 开发方法，由俄罗斯搜索引擎公司 Yandex 开发。它将用户界面分解为独立的块（Block），通过规范化的命名约定来构建可重用、可维护的 CSS 代码。

为什么需要 BEM？

在小型项目中，CSS 的组织方式通常不是什么大问题。但当项目变得更大更复杂时，代码的组织方式直接影响开发效率：

  • 开发速度：影响编写代码的时间
  • 代码量：影响需要编写的代码数量
  • 性能：影响浏览器的加载负担

这在团队协作和高性能要求的项目中尤其重要。

BEM vs 其他方法论

市面上有许多 CSS 方法论，如：

  • OOCSS：通过 CSS "对象" 分离容器和内容
  • SMACSS：使用五个类别来编写 CSS 的样式指南
  • SUITCSS：结构化的类名和有意义的连字符
  • Atomic CSS：将样式分解为原子级的、不可分割的片段

BEM 相比其他方法论的优势在于：它比其他方法（如 SMACSS）更简单易懂，但仍然提供了良好的架构（如 OOCSS），并且使用了易于识别的术语。

BEM 的核心理念是将 CSS 类名分为三个层次：

  • Block（块）：独立的功能组件
  • Element（元素）：块的组成部分
  • Modifier（修饰符）：定义块或元素的外观、状态或行为变化

BEM 命名规范详解

基本语法结构

/* Block */
.block {}

/* Element */
.block__element {}

/* Modifier */
.block--modifier {}
.block__element--modifier {}

1. Block（块）

块是一个独立的实体，本身就有意义。可以在任何地方重复使用，块名应该描述其用途，而不是外观。

常见示例：header、container、menu、checkbox、input

/* 正确的块命名 */
.header {}
.menu {}
.search-form {}
.button {}

/* 避免基于外观的命名 */
.red-button {}  /* 不推荐 */
.big-title {}   /* 不推荐 */

HTML 示例：

<div class="search-form">
  <!-- 搜索表单内容 -->
</div>

2. Element（元素）

元素是块的一部分，没有独立的意义，在语义上与其块相关联。使用双下划线（__）连接块名和元素名。元素不能独立于块存在。

常见示例：menu item、list item、checkbox caption、header title

.search-form__input {}
.search-form__button {}
.search-form__label {}

.menu__item {}
.menu__link {}

HTML 示例：

<form class="search-form">
  <label class="search-form__label">搜索：</label>
  <input class="search-form__input" type="text">
  <button class="search-form__button">提交</button>
</form>

3. Modifier（修饰符）

修饰符是块或元素上的标志，用于改变外观或行为。使用双中划线（--）连接。

常见示例：disabled、highlighted、checked、fixed、size big、color yellow

/* 块的修饰符 */
.button--primary {}
.button--large {}
.button--disabled {}

/* 元素的修饰符 */
.search-form__button--disabled {}
.menu__item--active {}

HTML 示例：

<button class="button button--primary button--large">
  主要按钮
</button>

<ul class="menu">
  <li class="menu__item menu__item--active">
    <a class="menu__link" href="#">首页</a>
  </li>
  <li class="menu__item">
    <a class="menu__link" href="#">关于我们</a>
  </li>
</ul>

BEM 的核心优势

1. 模块化（Modularity）

块的样式永远不依赖于页面上的其他元素，因此不会遇到级联带来的问题。你还可以将完成项目中的块转移到新项目中使用。

2. 可复用性（Reusability）

通过以不同方式组合独立的块，并智能地重复使用它们，可以减少需要维护的 CSS 代码量。有了一套样式指南，你可以构建一个块库，让你的 CSS 超级高效。

3. 结构化（Structure）

BEM 方法论为你的 CSS 代码提供了坚实的结构，保持简单易懂。

4. 提高代码可读性

BEM 的命名约定使 CSS 类名具有自描述性，开发者可以通过类名立即理解元素的作用和层级关系。

/* 清晰的结构关系 */
.card {}                    /* 卡片组件 */
.card__header {}           /* 卡片头部 */
.card__title {}            /* 卡片标题 */
.card__content {}          /* 卡片内容 */
.card__footer {}           /* 卡片底部 */
.card--featured {}         /* 特色卡片变体 */

2. 降低选择器特异性

BEM 避免使用嵌套选择器，保持低特异性，减少样式覆盖的复杂度。

/* BEM 方式 - 特异性为 10 */
.navigation__link--active {}

/* 传统方式 - 特异性为 30 */
.navigation ul li a.active {}

3. 增强可维护性

组件化的思维使代码更容易维护和修改，减少意外的样式影响。

/* 修改按钮样式不会影响其他组件 */
.button {
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
}

.button--secondary {
  background-color: #6c757d;
  color: white;
}

4. 促进模块化开发

BEM 鼓励将 UI 分解为独立的模块，提高代码复用性。

/* 可重用的卡片组件 */
.product-card {}
.product-card__image {}
.product-card__title {}
.product-card__price {}
.product-card--on-sale {}

项目中的实际应用

GitHub 按钮示例

让我们看看页面上的一个特定元素如何用 BEM 实现。以 GitHub 的按钮为例：

我们可以有一个普通按钮用于常见情况，以及两个不同状态的按钮。因为我们使用 BEM 的类选择器来设计块的样式，所以可以使用任何我们想要的标签来实现它们（button、a 甚至 div）。命名规则告诉我们使用 block--modifier-value 语法。

<button class="button">
  Normal button
</button>
<button class="button button--state-success">
  Success button
</button>
<button class="button button--state-danger">
  Danger button
</button>

.button {
  display: inline-block;
  border-radius: 3px;
  padding: 7px 12px;
  border: 1px solid #D5D5D5;
  background-image: linear-gradient(#EEE, #DDD);
  font: 700 13px/18px Helvetica, arial;
}

.button--state-success {
  color: #FFF;
  background: #569E3D linear-gradient(#79D858, #569E3D) repeat-x;
  border-color: #4A993E;
}

.button--state-danger {
  color: #900;
}

完整组件示例

以一个用户信息卡片为例，展示 BEM 在实际项目中的应用：

<div class="user-card user-card--premium">
  <div class="user-card__avatar">
    <img class="user-card__image" src="avatar.jpg" alt="用户头像">
    <span class="user-card__status user-card__status--online"></span>
  </div>
  <div class="user-card__info">
    <h3 class="user-card__name">张三</h3>
    <p class="user-card__title">高级开发工程师</p>
    <div class="user-card__contact">
      <span class="user-card__email">[email protected]</span>
      <span class="user-card__phone">138-0000-0000</span>
    </div>
  </div>
  <div class="user-card__actions">
    <button class="button button--primary button--small">发消息</button>
    <button class="button button--secondary button--small">查看资料</button>
  </div>
</div>

对应的 CSS：

/* 用户卡片组件 */
.user-card {
  display: flex;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.user-card--premium {
  border: 2px solid #gold;
  background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
}

/* 头像区域 */
.user-card__avatar {
  position: relative;
  margin-right: 16px;
}

.user-card__image {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.user-card__status {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid white;
}

.user-card__status--online {
  background-color: #28a745;
}

/* 信息区域 */
.user-card__info {
  flex: 1;
}

.user-card__name {
  margin: 0 0 4px 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.user-card__title {
  margin: 0 0 12px 0;
  color: #666;
  font-size: 14px;
}

.user-card__contact {
  display: flex;
  gap: 16px;
}

.user-card__email,
.user-card__phone {
  color: #888;
  font-size: 13px;
}

/* 操作区域 */
.user-card__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}

常见问题与解决方案

1. 类名过长的问题

问题： BEM 类名可能会变得很长，影响 HTML 可读性。

解决方案：

使用缩写

/* 适当使用缩写 */
.nav__item {}           /* 而不是 .navigation__item */
.btn--lg {}             /* 而不是 .button--large */
.form__input--err {}    /* 而不是 .form__input--error */

CSS 预处理器的 & 符号

使用 Sass/Less 的 & 符号简化书写：

.user-card {
  padding: 20px;
  background: white;
  
  &--premium {
    border: 2px solid gold;
  }
  
  &__avatar {
    margin-right: 16px;
  }
  
  &__image {
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }
  
  &__name {
    font-size: 18px;
    font-weight: 600;
    
    &--highlighted {
      color: #007bff;
    }
  }
}

编译后生成标准的 BEM 类名：

.user-card {
  padding: 20px;
  background: white;
}

.user-card--premium {
  border: 2px solid gold;
}

.user-card__avatar {
  margin-right: 16px;
}

.user-card__image {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.user-card__name {
  font-size: 18px;
  font-weight: 600;
}

.user-card__name--highlighted {
  color: #007bff;
}

2. 深层嵌套的处理

问题： 当组件层级很深时，如何避免过长的类名？

解决方案： 保持扁平化结构，避免超过两层的嵌套。

<!-- 不推荐：过深的嵌套 -->
<div class="card__content__section__item__title"></div>

<!-- 推荐：扁平化结构 -->
<div class="card">
  <div class="card__content">
    <div class="section">
      <div class="section__item">
        <h3 class="section__title"></h3>
      </div>
    </div>
  </div>
</div>

3. 响应式设计的处理

对于响应式需求，可以结合修饰符使用：

.grid {
  display: grid;
  gap: 16px;
}

.grid--cols-1 {
  grid-template-columns: 1fr;
}

.grid--cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid--cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* 响应式应用 */
@media (min-width: 768px) {
  .grid--responsive {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid--responsive {
    grid-template-columns: repeat(3, 1fr);
  }
}

最佳实践建议

1. 保持一致性

团队内部要统一 BEM 的使用规范，包括命名风格和缩写规则。

2. 避免过度嵌套

元素不要嵌套超过两层，复杂组件应该分解为多个独立的块。

3. 合理使用修饰符

修饰符应该描述状态或变体，而不是具体的样式属性。

/* 推荐 */
.button--primary {}
.button--loading {}

/* 不推荐 */
.button--blue {}
.button--16px {}

4. 文档化

为复杂组件编写文档，说明各个类名的用途和使用场景。

延伸阅读与参考资料

最后

CSS BEM 命名系统为前端开发提供了一套科学、规范的 CSS 组织方法。虽然初期可能需要适应较长的类名，但其带来的代码清晰度、可维护性和可扩展性的提升是显著的。结合现代 CSS 预处理器的使用，BEM 可以帮助开发团队构建更加健壮和可维护的前端架构。

在实际项目中，建议团队根据项目规模和复杂度适当调整 BEM 的使用程度，关键是保持一致性和可读性。通过持续的实践和优化，BEM 将成为提升前端代码质量的有力工具。

Read more

心智难民

心智难民

心智，按照牛津词典的定义，是获取和运用知识的能力。 互联网是一场技术革命，给每个人提供了机会。社会是由阶层组成的，每一场技术革命都促使了不同阶层的重新洗牌，或者说阶层分化。网络世界的阶层分化是什么样的呢？大概可以分为两个大的阶层：一类是接受高质量信息的精英阶层，另外一类是消费网络上的垃圾信息、接受劣质信息的乌合之众。 当然，这里说的“免费”是打引号的。因为它不仅不免费，而且一点也不便宜。 人们喜欢免费的东西。但是世界上除了阳光和空气，没什么是真正免费的东西，只是支付的方式不一样——有的直接用钱付，有的间接用钱付；有些用生活质量付，有些用人生的潜力和机会付。 You must pay for everything in this world, one way or another. Nothing is free. 你终究会以不同的方式付费，天下没有免费的午餐。 如果一个人只接受网上“免费”的信息，就像是只吃劣质食品一样，结果就是精神世界的劣质化。因为接受信息质量的差异，

By 王圆圆
Crazy World

Crazy World

by Jeff Daniels 译文 我看见一个年轻女孩笑了, 因为他刚说的话。 我看着他坠入她那双美丽的眼睛里, 脸红的像玫瑰。 我看见一位老人在走路, 妻子陪在他身旁。 我看着他俯身握住她的手, 天啊,我竟然哭了。 这疯狂的世界越来越疯狂, 我有什么资格评判呢? 但值得庆幸的是, 在这个充满仇恨的世界里, 还有人在用心相爱着。 我看见狗摇着尾巴, 看见孩子在奔跑。 我也曾在无数个日落里， 对着夕阳唱着歌。 我看见有人为别人扶着门, 看见陌生人握手寒暄。 我看见她和那个曾经错过的旧情人拥吻, 时间比计划中的更长了一些。 这个疯狂的世界继续疯狂着， 但我能说什么？ 好在这个充满恨的世界里， 还有人在用心相爱着。 我看见祈祷被回应， 看见了六月里的新娘。 我骄傲地说，我当时见到了银河， 对着月光下的人们闪烁。 我看见送出的一打玫瑰， 见过她满心的欢喜藏不住， 我见过的已经足够， 让我明白我所知道的， 也坚信我依然相信的。 这疯狂的世界越来越疯狂， 我能说什么？ 但值得庆幸的是， 在这个充满仇恨的世界里， 还有人相爱着。 原文 I’ve seen a

By 王圆圆
人是能被改变的吗？

人是能被改变的吗？

想改变别人基本上是在浪费时间。这个话题听起来简单,但仔细想想,我们生活中有太多时候都在做这种徒劳的事。 生活中的人大概可以分成三类: 喜欢的人 - 这些人即使有缺点你也能接受。你们相处舒服,他们做什么你都能理解,就算偶尔看不惯,也不会想着要去改造他们。 无所谓的人 - 占了我们生活中的大多数。同事、路人、网上的陌生人,他们怎么生活、怎么思考,其实跟你一点关系都没有。 讨厌的人 - 那些让你感到不舒服的人。可能是价值观完全相反,可能是行为方式你无法忍受。 既然人际关系本来就是这样,为什么还要费劲去改变谁呢?尤其是那些无所谓的人和讨厌的人,你花时间去说服他们、纠正他们,最后累的是自己。有这个功夫,不如多看两本书,学点新东西,改变一下自己。 美国人教小孩一个词:Walk Away。意思就是遇到麻烦的人、不讲理的人,转身走就完了,不用纠缠。 这听起来好像是逃避,但其实是一种很成熟的处理方式。你不是害怕对方,而是知道跟这种人浪费时间没有意义。 有个作家Charles Portis说过一句话挺有意思的:"

By 王圆圆
留守的代价

留守的代价

我有一个90后的朋友,她的故事让我久久无法平静。 她13岁那年,初中还没读完就辍学了,跟着同乡去了南方打工。六年后,在家人的安排下,她嫁给了邻村一个老实人家的儿子。没有恋爱,没有了解,只有两个家庭觉得"差不多,能过"的判断。 婚后他们一起在宁波工作,陆续有了两个女儿。按理说,一家四口,日子虽苦但也算完整。但我们那个地方,重男轻女的观念像一只看不见的手,推着她生下了第三个孩子——终于是个儿子。 三个孩子陆续到了上学的年龄,他们却一直在外打工。孩子成了留守儿童,跟着爷爷奶奶在老家,一年见父母一两次。视频通话里,孩子越来越沉默,成绩越来越差,老师反映性格也出现了问题。 她做了一个决定:回家照顾孩子。 他继续在外地送快递。从此,这个家庭被一分为二——一边是她独自面对三个问题儿童的混乱和辛苦,一边是他在城市里每天十几个小时的奔波劳累。 本来就没什么感情基础的两个人,在这种分离中,最后那点维系也消磨殆尽了。 最近两年,他给家里的生活费越来越少。后来她才知道,他在外面有了别人,赚的钱不多,都花在了新欢身上。

By 王圆圆