什么是 BEM 规范
BEM（Block, Element, Modifier）是一种 CSS 命名规范，旨在提高代码的可读性和可维护性。BEM 规范通过明确的命名规则来定义组件和组件的各个部分，使开发者能够更容易地理解和维护代码。
BEM 命名规范的基本概念
- Block（块）：代表一个独立的组件，类似于一个功能模块。例如，一个导航栏或按钮。
- Element（元素）：代表块的组成部分，与块紧密相关，但不能单独存在。例如，按钮中的图标或导航栏中的菜单项。
- Modifier（修饰符）：代表块或元素的不同状态或变体，用于修改块或元素的外观或行为。例如，按钮的大小或颜色变化。
命名规则
BEM 的命名规则使用两个连接符：
- 双下划线（
__）：用于连接块和元素。 - 双破折号（
--）：用于连接块或元素与修饰符。
示例
HTML
<div class="nav"><ul class="nav__list"><li class="nav__item nav__item--active">首页</li><li class="nav__item">关于</li><li class="nav__item">联系</li></ul>
</div>
CSS
/* 块 */
.nav {background-color: #333;color: #fff;padding: 10px;
}/* 元素 */
.nav__list {list-style: none;padding: 0;margin: 0;display: flex;
}.nav__item {margin-right: 15px;
}/* 修饰符 */
.nav__item--active {font-weight: bold;
}
BEM 的优点
- 可读性：通过明确的命名规则，开发者可以快速理解代码的结构和含义。
- 可维护性：清晰的命名规范使得修改和扩展代码变得更加容易。
- 复用性：通过块和修饰符的组合，可以方便地创建可复用的组件。
- 避免冲突：BEM 命名规范通过特定的命名方式，减少了样式命名冲突的可能性。
BEM 的缺点
- 冗长：BEM 的命名规则可能导致类名较长，影响代码的简洁性。
- 学习曲线：对于初学者来说，需要一些时间来熟悉和掌握 BEM 的命名规范。