BEM 是一种针对 CSS 类样式的命名方法，旨在解决 CSS 代码中的类名冲突问题，并提高代码的可读性和可维护性。BEM 全称是 Block Element Modifier。
1. BEM 的基本概念
一个完整的 BEM 类名格式为：block__element--modifier。例如：banner__dot--selected，可以表示轮播图中处于选中状态的小圆点。
1.1 Block
- 含义：页面中的大区域，表示最顶级的划分。
- 示例：轮播图 (
banner)、布局 (layout)、文章 (article) 等等。
1.2 Element
- 含义：区域中的组成部分。
- 示例：轮播图中的横幅图片 (
banner__img)、轮播图中的容器 (banner__container)、布局中的头部 (layout__header)、文章中的标题 (article__title)。
1.3 Modifier
- 含义：可选。通常表示状态或变体。
- 示例：处于展开状态的布局左边栏 (
layout__left--expand)、处于选中状态的轮播图小圆点 (banner__dot--selected)。
2. BEM 命名示例
假设我们有一个轮播图组件，我们可以这样命名其各个部分的类名：
<div class="banner">
<div class="banner__container">
<img class="banner__img" src="image1.jpg" alt="Image 1">
<img class="banner__img" src="image2.jpg" alt="Image 2">
<ul class="banner__dots">
<li class="banner__dot banner__dot--selected"></li>
<li class="banner__dot"></li>
</ul>
</div>
</div>
2.1 Block
banner：表示轮播图组件的整体。
2.2 Element
banner__container：表示轮播图的容器。banner__img：表示轮播图中的图片。banner__dots：表示轮播图中的小圆点集合。banner__dot：表示轮播图中的单个小圆点。
2.3 Modifier
banner__dot--selected：表示处于选中状态的小圆点。
3. 前缀
在某些大型工程中，为了进一步明确类名的用途，可能会增加一个前缀。常见的前缀有：
- l：layout，表示这个样式是用于布局的。
- c：component，表示这个样式是一个组件，即一个功能区域。
- u：util，表示这个样式是一个通用的、工具性质的样式。
- j：javascript，表示这个样式没有实际意义，是专门提供给 JavaScript 获取元素使用的。
3.1 示例
<div class="l-container">
<div class="c-banner">
<img class="c-banner__img" src="image1.jpg" alt="Image 1">
<ul class="c-banner__dots">
<li class="c-banner__dot c-banner__dot--selected"></li>
<li class="c-banner__dot"></li>
</ul>
</div>
<button class="u-btn u-btn--primary">Click Me</button>
<div class="j-modal" id="modal"></div>
</div>
l-container：布局容器。c-banner：轮播图组件。c-banner__img：轮播图中的图片。c-banner__dots：轮播图中的小圆点集合。c-banner__dot：轮播图中的单个小圆点。c-banner__dot--selected：处于选中状态的小圆点。u-btn：通用按钮样式。u-btn--primary：主要按钮样式。j-modal：JavaScript 专用的模态框类名。
总结
通过本课程，你已经了解了 BEM 命名方法的基本概念和使用方法。BEM 命名方法可以帮助你更好地组织和管理 CSS 代码，避免类名冲突，提高代码的可读性和可维护性。
