【Nova UI】三、探秘 BEM：解锁前端 CSS 命名的高效密码

序言

在上一篇文章中，我们一步一个脚印，扎实地完成了 Vue 组件库搭建的环境搭建工作，从 pnpm 的精妙运用到 TypeScript 的细致配置✍️，每个环节都为组件库的诞生筑牢根基。现在，当我们把目光聚焦到组件库的样式设计时，一种极为实用且风靡前端界的 CSS 命名规范 ——BEM 规范，自然而然地进入了我们的视野。它就如同 CSS 世界里的导航灯塔🚢，为我们在样式管理的复杂海洋中指引方向，接下来，让我们一同深入探寻 BEM 规范的奥秘。

什么是BEM规范？

在前端开发领域，随着项目规模的不断扩大和代码复杂度的增加，如何有效地组织和管理 CSS 样式成为了一个关键问题。BEM 规范应运而生，它为我们提供了一种清晰、结构化的方式来命名和管理 CSS 类，极大地提升了代码的可维护性和可扩展性💻。

BEM 分别代表什么？

BEM 即 Block（块）、Element（元素）、Modifier（修饰符）的缩写，是由 Yandex 团队提出的一种 CSS 命名规范。它通过一种特定的命名约定，让我们能够直观地从类名中了解到 HTML 元素的结构和样式信息📏。

块（Block）

元素是块的有机组成部分，无法脱离块单独存在，且只有在块的语境中才有意义。对于按钮块来说，若按钮内部包含图标和文本，那么图标和文本就可看作按钮的元素。通过在块的类名后添加双下划线__来表示元素类名，如按钮中的图标元素可写成button__icon ，文本元素可写成button__text。HTML 代码如下：

<button class="button">点击我</button>

.button {background-color: #007BFF;color: white;padding: 10px 20px;border: none;border - radius: 5px;cursor: pointer;
}

元素（Element）

元素是块的有机组成部分，无法脱离块单独存在，且只有在块的语境中才有意义。对于按钮块来说，若按钮内部包含图标和文本，那么图标和文本就可看作按钮的元素。通过在块的类名后添加双下划线__来表示元素类名，如按钮中的图标元素可写成button__icon ，文本元素可写成button__text。HTML 代码如下：

<button class="button"><i class="button__icon"></i><span class="button__text">提交</span>
</button>

.button__icon {display: inline - block;margin - right: 5px;/* 这里可以添加图标的具体样式，如背景图、大小等 */
}
.button__text {display: inline - block;font - size: 16px;
}

修饰符（Modifier）

修饰符用于刻画块或元素在外观、状态或行为上的变化。对于按钮块而言，它可能有不同颜色、大小或禁用状态。在块或元素的类名后加上双连字符--来表示修饰符类名。例如，绿色的按钮可写成button--green，大尺寸的按钮可写成button--large，禁用状态的按钮可写成button--disabled。HTML 代码如下：

<button class="button button--green">绿色按钮</button>
<button class="button button--large">大按钮</button>
<button class="button button--disabled">禁用按钮</button>

.button--green {background-color: green;
}
.button--large {padding: 15px 30px;font - size: 18px;
}
.button--disabled {background-color: #ccc;color: #999;cursor: not - allowed;
}

BEM 规范的优势

提高代码的可读性和可维护性📖

BEM 规范下的类名，如同清晰的注释，让我们一眼便能知晓元素的结构与所属关系。看到button__text--highlighted，脑海中立刻浮现出这是按钮内被突出显示的文本。当需要修改样式时，借助类名能迅速定位到对应的 CSS 代码，大幅缩短排查与修改时间。

便于团队协作🤝

在多人协作的开发项目中，BEM 规范是统一的语言，确保每位成员遵循相同的命名规则。新成员加入项目时，也能凭借这套规范快速理解代码结构，有效减少因命名差异导致的沟通成本与错误，提升团队整体开发效率。

增强代码的可扩展性🚀

随着项目的演进，新增样式或功能是常有的事。BEM 规范让这一过程变得轻松自如，只需添加新的修饰符类，便不会对其他部分的样式产生干扰。例如，为按钮添加--rounded - corners修饰符表示圆角按钮，不会破坏原有的按钮样式体系。

方便进行样式复用♻️

块和元素的独立性，使得它们如同可复用的积木，能在不同项目或页面中重复使用。以button块为例，在多个场景中，只需依据需求添加不同修饰符，就能轻松适配各种样式需求，避免了重复编写代码，提高开发效率。

使用 BEM 规范的注意事项

避免过度嵌套

尽管 BEM 规范允许元素在块内嵌套，但过度嵌套会使类名冗长繁杂，增加代码理解难度。应秉持简洁原则，避免不必要的层级嵌套。比如对于按钮，如果内部结构较为复杂，要思考是否有更合理的方式拆分或组织，而不是一味地进行多层嵌套。

合理使用修饰符

修饰符应精准用于表示真实的外观、状态或行为变化，避免滥用。杜绝出现意义相近的修饰符，如button--red和button--scarlet，这类情况可通过 CSS 变量等方式实现颜色微调，保持代码简洁与规范。同时，修饰符的命名应具有清晰的语义，让人一看便知其代表的样式变化。

结合其他 CSS 技术

BEM 规范主要聚焦于命名约定，在实际开发中，需与其他 CSS 技术协同作战。比如 CSS 预处理器（Sass、Less）、CSS 模块化等。使用 CSS 预处理器能更便捷地管理变量、混合宏等，与 BEM 规范结合，能发挥出更大优势，提升开发效率与代码质量。例如，通过 Sass 的变量功能，可以方便地统一管理按钮的颜色、尺寸等基础样式，再结合 BEM 规范的命名，使代码更加清晰和易于维护。

综上所述，BEM 规范在前端开发中是一项极具实用价值的技术。它凭借清晰的命名规则，为我们构建了一套高效的 CSS 管理模式，在提升代码质量、增进团队协作以及适应项目变化等方面，都发挥着举足轻重的作用。无论是初涉前端开发的新手，还是经验丰富的资深开发者，深入学习并熟练应用 BEM 规范，都将为自身的技术提升与项目开发带来显著助益🌟。

🦀🦀感谢看官看到这里，如果觉得文章不错的话🙌，点个关注不迷路⭐。
诚邀您加入我的微信技术交流群🎉，群里都是志同道合的开发者👨‍💻，大家能一起交流分享摸鱼🐟。期待与您在群里相见🚀，咱们携手在开发路上共同进步✨ ！
👉点我

感谢各位大侠一路相伴，实在感激！ 不瞒您说，在下还有几个开源项目 📦，它们就像精心培育的幼苗 🌱，急需您的浇灌。要是您瞧着还不错，麻烦动动手指，给它们点亮几颗 Star ⭐，您的支持就是它们成长的最大动力，在此谢过各位大侠啦！

• Nova UI组件库：https://github.com/gmingchen/nova-ui
• 基于 Vue3 + Element-plus 管理后台基础功能框架
• 预览：https://admin.gumingchen.icu
  • Github：https://github.com/gmingchen/agile-admin
  • Gitee：https://gitee.com/shychen/agile-admin
  • 基础版后端：https://github.com/gmingchen/java-spring-boot-admin
  • 文档：http://admin.gumingchen.icu/doc/
• 基于 Vue3 + Element-plus + websocket 即时聊天系统
  • 预览：https://chatterbox.gumingchen.icu/
  • Github：https://github.com/gmingchen/chatterbox
  • Gitee：https://gitee.com/shychen/chatterbox
• 基于 node 开发的后端服务：https://github.com/gmingchen/node-server