在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结构。这种设计使得修饰符可以灵活地应用于不同的场景，而无需修改基础组件。
立即学习“前端免费学习笔记（深入）”；
/* 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规范，减少样式冲突。
