BEM 命名规范：理解与实践
概述什么是 BEM？基本组成部分类名结构 为什么使用 BEM？易于维护可复用性可扩展性 示例一：定义基本的 BEM 结构HTMLCSS 说明 示例二：使用 Modifier 改变样式HTMLCSS 说明 示例三：利用 JavaScript 动态更改 ModifierHTMLJavaScript 说明 实际工作中的使用技巧技巧一：避免全局选择器技巧二：利用 BEM 工具技巧三：使用预处理器技巧四：考虑复用 结合实际场景的应用
概述
在前端开发中，CSS 类名的命名方式对于维护项目的可读性和可扩展性至关重要。BEM（Block Element Modifier）是一种流行的命名约定，旨在帮助开发者编写更易于理解和维护的 CSS 代码。本文将深入探讨 BEM 的概念、优势以及如何在实际项目中应用这一规范。
什么是 BEM？
BEM 代表 Block Element Modifier，这是一种 CSS 类名命名方法论，由 Yandex 公司提出。BEM 的核心理念是将页面拆分成独立的、可复用的组件（块），并通过明确的类名结构来组织样式。
基本组成部分
Block: 页面上的独立组成部分，如 header、footer、navigation 等。Element: 组成 Block 的子部分，例如 header 中的 logo 或 navigation 中的 list item。Modifier: 表示 Block 或 Element 的状态或外观变化。类名结构
Block 类名以单个词组成，例如.header。Element 类名以 Block 名称加上两个下划线（__）加上 Element 名称组成，例如 .header__logo。Modifier 类名以 Block 或 Element 名称加上两个连字符（--）加上 Modifier 名称组成，例如 .header--dark 或 .header__logo--small。 为什么使用 BEM？
易于维护
清晰的命名：BEM 提供了一种明确的命名模式，使得开发者容易识别 CSS 类名所代表的含义。减少冲突：由于 BEM 使用了特定的命名模式，因此可以避免 CSS 类名之间的冲突。可复用性
组件化：BEM 鼓励将页面拆分为可复用的组件，这有助于构建模块化的系统。可扩展性
灵活的 Modifier：通过 Modifier 可以轻松地改变组件的状态或外观，无需额外的 CSS 类名。示例一：定义基本的 BEM 结构
假设我们要创建一个简单的导航组件，包含一个 logo 和一些链接列表项。
HTML
<nav class="navigation"> <div class="navigation__logo">Logo</div> <ul class="navigation__list"> <li class="navigation__item"><a href="#">Home</a></li> <li class="navigation__item"><a href="#">About</a></li> <li class="navigation__item"><a href="#">Contact</a></li> </ul></nav>CSS
/* Block */.navigation { background-color: #f5f5f5;}/* Element */.navigation__logo { font-size: 24px; color: #333;}.navigation__list { list-style-type: none; padding: 0;}.navigation__item { display: inline-block; margin-right: 10px;}/* Modifier */.navigation--dark { background-color: #333;}.navigation__logo--dark { color: #fff;}说明
在这个示例中，.navigation 是 Block，.navigation__logo 和 .navigation__list 是 Elements，.navigation--dark 和 .navigation__logo--dark 是 Modifiers。这种结构不仅让 CSS 更易于维护，还能方便地改变导航栏的样式。
示例二：使用 Modifier 改变样式
假设我们需要给导航栏添加两种不同的主题：默认主题和深色主题。
HTML
<nav class="navigation navigation--dark"> <div class="navigation__logo navigation__logo--dark">Logo</div> <ul class="navigation__list"> <li class="navigation__item"><a href="#">Home</a></li> <li class="navigation__item"><a href="#">About</a></li> <li class="navigation__item"><a href="#">Contact</a></li> </ul></nav>CSS
/* Modifier */.navigation--dark { background-color: #333;}.navigation__logo--dark { color: #fff;}说明
通过添加 .navigation--dark 和 .navigation__logo--dark 类名，我们可以很容易地切换导航栏的主题。这种做法使得 CSS 更加模块化，便于管理不同的样式变化。
示例三：利用 JavaScript 动态更改 Modifier
假设我们需要根据用户的操作动态更改导航栏的样式。
HTML
<nav id="navigation" class="navigation navigation--dark"> <div class="navigation__logo navigation__logo--dark">Logo</div> <ul class="navigation__list"> <li class="navigation__item"><a href="#">Home</a></li> <li class="navigation__item"><a href="#">About</a></li> <li class="navigation__item"><a href="#">Contact</a></li> </ul></nav>JavaScript
document.getElementById('navigation').classList.toggle('navigation--dark');document.getElementById('navigation__logo').classList.toggle('navigation__logo--dark');说明
使用 JavaScript 我们可以动态地添加或删除 Modifier 类名，从而实现导航栏样式的实时切换。
实际工作中的使用技巧
技巧一：避免全局选择器
推荐使用：.navigation__logo 代替 div.logo。理由：更具体的类名有助于避免样式冲突。 技巧二：利用 BEM 工具
推荐工具：BEM Tools。功能：可以帮助生成 BEM 类名，提高编码效率。技巧三：使用预处理器
推荐使用：Sass 或 Less。理由：预处理器支持嵌套选择器，可以使 BEM 类名更加简洁。技巧四：考虑复用
推荐做法：尽量复用已有的 Block 和 Element。理由：减少重复的代码，提高代码的可维护性。结合实际场景的应用
在实际项目中，BEM 的应用非常广泛，尤其是在大型团队协作和长期维护的项目中。例如，在电子商务网站中，产品列表组件可以被多个页面复用，而不同的页面可能需要不同的样式变化（如不同的布局或颜色方案）。通过使用 BEM，我们可以轻松地为这个组件添加不同的 Modifier 来满足这些需求，而无需担心样式冲突或过度耦合的问题。
通过本文的介绍和示例，希望你能更好地理解 BEM 的重要性和应用方法。在你的下一个项目中尝试使用 BEM，看看它如何帮助你构建更加健壮和易于维护的前端代码。
欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。
推荐：DTcode7的博客首页。
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
| 专栏系列（点击解锁） | 学习路线(点击解锁） | 知识定位 |
|---|---|---|
| 《微信小程序相关博客》 | 持续更新中~ | 结合微信官方原生框架、uniapp等小程序框架，记录请求、封装、tabbar、UI组件的学习记录和使用技巧等 |
| 《AIGC相关博客》 | 持续更新中~ | AIGC、AI生产力工具的介绍，例如stable diffusion这种的AI绘画工具安装、使用、技巧等总结 |
| 《HTML网站开发相关》 | 《前端基础入门三大核心之html相关博客》 | 前端基础入门三大核心之html板块的内容，入坑前端或者辅助学习的必看知识 |
| 《前端基础入门三大核心之JS相关博客》 | 前端JS是JavaScript语言在网页开发中的应用，负责实现交互效果和动态内容。它与HTML和CSS并称前端三剑客，共同构建用户界面。 通过操作DOM元素、响应事件、发起网络请求等，JS使页面能够响应用户行为，实现数据动态展示和页面流畅跳转，是现代Web开发的核心 | |
| 《前端基础入门三大核心之CSS相关博客》 | 介绍前端开发中遇到的CSS疑问和各种奇妙的CSS语法，同时收集精美的CSS效果代码，用来丰富你的web网页 | |
| 《canvas绘图相关博客》 | Canvas是HTML5中用于绘制图形的元素，通过JavaScript及其提供的绘图API，开发者可以在网页上绘制出各种复杂的图形、动画和图像效果。Canvas提供了高度的灵活性和控制力，使得前端绘图技术更加丰富和多样化 | |
| 《Vue实战相关博客》 | 持续更新中~ | 详细总结了常用UI库elementUI的使用技巧以及Vue的学习之旅 |
| 《python相关博客》 | 持续更新中~ | Python，简洁易学的编程语言，强大到足以应对各种应用场景，是编程新手的理想选择，也是专业人士的得力工具 |
| 《sql数据库相关博客》 | 持续更新中~ | SQL数据库：高效管理数据的利器，学会SQL，轻松驾驭结构化数据，解锁数据分析与挖掘的无限可能 |
| 《算法系列相关博客》 | 持续更新中~ | 算法与数据结构学习总结，通过JS来编写处理复杂有趣的算法问题，提升你的技术思维 |
| 《IT信息技术相关博客》 | 持续更新中~ | 作为信息化人员所需要掌握的底层技术，涉及软件开发、网络建设、系统维护等领域的知识 |
| 《信息化人员基础技能知识相关博客》 | 无论你是开发、产品、实施、经理，只要是从事信息化相关行业的人员，都应该掌握这些信息化的基础知识，可以不精通但是一定要了解，避免日常工作中贻笑大方 | |
| 《信息化技能面试宝典相关博客》 | 涉及信息化相关工作基础知识和面试技巧，提升自我能力与面试通过率，扩展知识面 | |
| 《前端开发习惯与小技巧相关博客》 | 持续更新中~ | 罗列常用的开发工具使用技巧,如 Vscode快捷键操作、Git、CMD、游览器控制台等 |
| 《photoshop相关博客》 | 持续更新中~ | 基础的PS学习记录，含括PPI与DPI、物理像素dp、逻辑像素dip、矢量图和位图以及帧动画等的学习总结 |
| 日常开发&办公&生产【实用工具】分享相关博客》 | 持续更新中~ | 分享介绍各种开发中、工作中、个人生产以及学习上的工具，丰富阅历，给大家提供处理事情的更多角度，学习了解更多的便利工具，如Fiddler抓包、办公快捷键、虚拟机VMware等工具 |
吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤
非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！