bem中block、element、modifier是三类命名角色：block为独立功能模块（如header、card），element为其直系组成部分（card__title），modifier描述状态变体（card--featured）；严禁嵌套element（如card__image__caption非法），双连字符--专用于分隔block与modifier，__不可误写为_或___，嵌套结构应由html和css布局实现而非类名层级。
什么是BEM里的block、element和modifier
不是抽象概念，是三类命名角色：一个block代表独立功能模块（比如header、card），element是它内部的组成部分（card__title、card__image），modifier描述状态或变体（card--featured、button--disabled）。关键在“不嵌套层级”——card__image--rounded合法，card__image__caption非法，因为caption属于image的子元素，但BEM不承认这种父子关系，它只认card这个块下的直系element。
为什么button--primary不能写成button-primary
双连字符--是BEM硬性分隔符，用来明确区分block和modifier。写成button-primary会被当成另一个block，破坏语义隔离。更实际的问题是：CSS选择器权重会失控。如果同时有.button和.button-primary，后者权重和前者一样（都是class），而.button--primary必须配合.button使用（.button.button--primary），天然形成组合约束，避免样式意外覆盖。
-
button--primary必须和button同时存在，语义清晰、可预测 -
button-primary独立存在，容易和其它primary类（如heading-primary）产生命名冲突 - 工具链（如
postcss-bem）依赖--识别modifier，写错就失效
怎么避免__下划线连用引发的拼写错误
__是block到element的固定分隔符，但手快容易打成_或___，导致选择器完全不生效。最稳妥的做法是：把常用组合提前定义为变量或片段。比如VS Code里配置代码片段：btn__text → button__text，card__img → card__image。另外，检查编译后CSS里是否出现.card_image这类无意义类名——那基本是__漏打了一个下划线。
- 浏览器开发者工具里搜
__，看是否所有element都符合block__element格式 - 禁用
!important，靠BEM结构本身控制优先级；一旦需要!important，大概率是__写错了导致样式没上 - 别用
card-element这种“短横线+小写”混搭，BEM只认__和--
遇到组件嵌套深时，BEM要不要“破例”加层级
不要。哪怕modal里套了form再套input-group，每个仍是独立block。正确的做法是：modal、form、input-group各自命名，用BEM规则分别管理自己的element和modifier。强行写modal__form__input看似直观，实则让input失去复用能力——它只能活在modal里，抽出来就断样式。
- 嵌套逻辑交给HTML结构和CSS布局（Flex/Grid），不是靠类名体现
- 多个
block可以共用同一套modifier，比如button--small和input--small，只要语义一致就合理 - 真正难处理的是“跨块修饰”，比如
card在grid中需要额外间距——这时用grid__item--card比改card本身更安全
BEM不是靠记忆规则赢，是靠每次写类名前问一句：“它属于哪个独立功能单元？它是单元里的哪部分？它当前是什么状态？” 三个问题答完，__和--的位置基本就定了。最常出错的地方，其实是把“视觉位置”当成了“语义归属”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
