BEM 通过 block__element--modifier 命名强制作用域隔离，降低样式覆盖成本；禁用复杂选择器、依赖工具链校验与编辑器支持，并需配合设计令牌管理全局变量。
为什么直接写 .header .nav li a 会让人半夜改样式时崩溃
因为选择器层级越深，覆盖成本越高，协作时谁都不敢动前面的类名——改一个，全站导航突然变蓝，还找不到源头。BEM 不是加前缀的仪式感，是把“谁属于谁”提前钉死在类名里，让样式作用域可预测。
实操建议：
- 块（Block）独立存在，不依赖上下文，比如
header、card、search-form - 元素（Element）必须用双下划线连接块名，如
header__logo、card__title，禁止嵌套写成card__content__title - 修饰符（Modifier）用双破折号，表示状态或变体，如
button--primary、nav--vertical，它永远依附于块或元素，不能单独使用
block__element--modifier 这个命名看起来啰嗦，但少写一个字符就可能漏掉语义
常见错误：把 modal__close-btn 写成 modal-close-btn，表面省事，实际破坏了 BEM 的“块隔离”原则——这个按钮一旦被复用到 tooltip 里，样式就串了；或者写成 modal__close_button（下划线分隔），导致无法用 CSS 属性选择器快速定位所有 button 类型元素。
使用场景中要注意：
立即学习“前端免费学习笔记（深入）”；
- 元素名用语义化名词，不是 HTML 标签名：
card__image✅，card__img❌ - 修饰符不表达位置，只表达状态：
list--compact✅，list--left❌（位置应由布局系统控制） - 避免多级修饰符叠加：
button--primary--large是反模式，应拆成button--primary button--large
如何让 BEM 真正跑起来，而不是堆满 !important
光靠命名规则压不住 CSS 的层叠逻辑。关键在限制选择器复杂度：BEM 的前提是「只用类名」，禁用标签选择器、ID 选择器、属性选择器（除了 [type="submit"] 这类必要判断）和后代组合器。
实操建议：
- 所有样式都以单个类名为基础：写
.button { ... }，不写button.button { ... } - 需要覆盖时，用另一个 BEM 类名代替层叠，比如默认
input用form-field，禁用态就加form-field--disabled，而不是靠.form-field:disabled或更高权重选择器 - 组件内伪类统一挂载到块或元素上：
button--primary:hover，而不是button--primary:hover span
工具链没跟上，BEM 就只是自我安慰
手敲 sidebar__item--active 十次之后，你会开始怀疑人生。真正降低心智负担的是编辑器支持和构建约束。
推荐做法：
- VS Code 安装
BEM Tools插件，输入block__elem自动补全为block__elem--mod结构 - 用 PostCSS 插件
postcss-bem-linter在构建时校验命名，报错如Invalid BEM node: .header-logo - 如果团队用 SCSS，别写嵌套：禁止
.header { &__logo { ... } }，它生成的 CSS 仍合法，但掩盖了真实选择器长度，且不利于提取原子类
最常被忽略的一点：BEM 解决不了全局变量污染。颜色、间距、断点这些仍得靠 CSS 自定义属性或设计令牌（Design Tokens）管理，否则 button--primary 在三个地方硬编码 #007bff，改主题时照样抓狂。
