bem通过“块__元素--修饰符”命名法使class名语义清晰、无需上下文即可理解，如button__icon表示按钮的图标子元素，button--primary表示主色调修饰态，且禁止嵌套过深或跨块组合。
为什么BEM能让人一眼看懂class名在干啥
因为BEM把「组件名」「子元素」「修饰状态」三者用固定分隔符拆开，不靠上下文猜，也不靠注释补。比如 header__logo--dark，不用打开HTML就能判断：这是 header 组件里的 logo 子元素，当前启用暗色模式修饰态。
常见错误是写成 header-logo-dark（缺双下划线/双短横），或 headerLogoDark（驼峰，破坏可读性与CSS选择器一致性）。更隐蔽的坑是嵌套过深：card__content__title__link —— BEM不允许三级子元素，title 应该是独立块，改用 title__link。
- 子元素用双下划线
__（如button__icon），不是单下划线 - 修饰符用双短横
--（如button--primary），不是-或_ - 不允许跨块组合类名，比如别写
header__button--submit；button是独立块，就该用button button--submit
怎么给一个按钮组件写合规的BEM class名
从真实需求出发：你正在封装一个带图标和加载态的按钮，要支持主题色、尺寸、禁用状态。BEM要求每个class只表达一层含义，所以得拆成多个独立class，而不是堆砌语义。
正确写法：<button class="button button--primary button--large is-loading"><span class="button__icon"></span><span class="button__text">提交</span></button>。这里 button 是块，button--primary 和 button--large 是修饰符，is-loading 是布尔型状态类（BEM推荐用 is- 前缀表示开关态）。
-
button__icon和button__text必须是直接子元素，不能套在div里再加class - 修饰符之间互不依赖，
button--primary button--small可以自由组合 - 避免用
button--primary--loading这种复合修饰符，加载态应由is-loading单独控制
遇到第三方UI库时BEM怎么不打架
直接覆盖第三方class是自找麻烦，BEM的解法是「隔离作用域」：用一个BEM块名包裹第三方组件，所有样式通过该块向下穿透控制，不碰原class。
比如用Element Plus的 el-button，不要写 .el-button--primary { ... }，而是：<div class="my-form"><el-button class="my-form__submit"></el-button></div>，然后在CSS里写 .my-form__submit ::v-deep .el-button { ... }（Vue SFC）或 .my-form__submit .el-button（Shadow DOM外置样式）。这样既保留BEM结构，又不污染全局。
- 第三方组件的原始class一律不重写，只作为底层节点被BEM容器选择器约束
- 如果必须定制内部结构（比如改
el-input的前缀图标），优先用其提供的prefix-icon插槽，而非强行加el-input__inner类 - 警惕CSS-in-JS库自动哈希class后破坏BEM命名，需配置
generateScopedName保留__和--
为什么CSS Modules + BEM不是最佳拍档
CSS Modules默认对class名做哈希，button__icon 变成 abc123__icon，BEM的语义链就断了。开发者看DOM时无法对应源码，调试时也找不到原始class名。
真要用CSS Modules，必须关掉哈希或白名单保留BEM结构：modules: { localIdentName: '[name]__[local]--[hash:base64:5]' } 不行，得改成 [name]__[local]。但这就失去CSS Modules防冲突的本意——所以更现实的做法是：用BEM就放弃CSS Modules，改用PostCSS插件（如 postcss-bem）做预处理，或直接靠命名约定+严格Code Review来保障隔离。
- BEM本质是协作规范，不是技术强制，它的价值在开发者肉眼可读、团队可共识
- 哈希class让设计稿标注的
card__header在DevTools里根本搜不到，协作成本陡增 - 如果项目已重度依赖CSS Modules，不如放弃BEM，改用更轻量的语义前缀（如
u-text-center,o-layout-grid）
真正难的不是写对BEM语法，而是让所有人——包括刚入职的同事、外包的前端、甚至后端改模板的人——在不查文档的前提下，凭直觉写出不冲突、不歧义、不越界的class名。这需要持续的CR和明确的命名字典，而不是靠工具一劳永逸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
