在css bem规范中，修饰符（modifier）的命名应使用双连字符 `--` 作为块（block）与元素（element）之间的分隔符，用于描述组件的不同状态、变体或主题。例如，对于名为 `button` 的块，其修饰符可命名为 `button--primary` 或 `button--disabled`。这种命名方式确保了样式的语义清晰且易于维护。

如何区分BEM中的块、元素和修饰符？

BEM将CSS类名分为三个部分：块（Block）、元素（Element）和修饰符（Modifier）。块是独立的组件，如 `header`；元素是块的组成部分，如 `header__title`；修饰符则是块或元素的变体，如 `header__title--large`。通过这种结构，可以清晰地表达HTML元素的层级关系。

/* HTML */
<div class="header">
  <h1 class="header__title header__title--large">Title</h1>
</div>

/* CSS */
.header {
  background: #f0f0f0;
}
.header__title {
  font-size: 16px;
}
.header__title--large {
  font-size: 24px;
}

修饰符是否会影响块的结构？

修饰符不会改变块的结构，它仅用于调整样式或行为。例如，`button--active` 可能改变按钮的颜色，但不会影响其HTML结构。这种设计使得修饰符可以灵活地应用于不同的场景，而无需修改基础组件。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

/* HTML */
<button class="button button--active">Click Me</button>

/* CSS */
.button {
  padding: 10px 20px;
  background: blue;
}
.button--active {
  background: green;
}

如何在实际项目中应用BEM修饰符？

在实际项目中，建议为每个组件定义一组常见的修饰符，并在文档中明确其用途。例如，对于 `card` 组件，可以定义 `card--featured` 和 `card--compact` 等修饰符。这样可以确保团队成员一致地使用BEM规范，减少样式冲突。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！