直接写 .header .logo 会因 dom 层级依赖导致样式污染和复用冲突；bem 用 header__logo 表达语义归属而非视觉嵌套，提升可维护性、工具识别与团队协作效率。
为什么直接写 .header .logo 在组件化项目里会出问题
因为样式污染和复用冲突。父组件改了 class 名，子组件的 .header .logo 就失效；两个不同 Header 组件共用同一套 CSS 选择器时，后加载的样式会意外覆盖前一个。
根本原因不是选择器“写错了”，而是它隐含了 DOM 层级依赖——而现代组件（比如 React/Vue）的渲染结构可能动态变化，甚至用 Portal 把子节点挂到 body 下。
- 避免用后代选择器（
.parent .child）表达父子关系，它对结构太敏感 - BEM 的
block__element不是“视觉嵌套”，而是语义归属：只要逻辑上属于这个 block，就用它的命名空间 - 哪怕
Logo渲染在Header外面，只要它是 Header 的一部分，就该叫header__logo
怎么给带层级的 React 组件写 BEM 类名（不靠 CSS-in-JS）
关键不是“怎么生成 class 字符串”，而是谁负责定义 block 名、谁决定 element 名。常见错误是让子组件自己拼 props.blockName + '__icon'，结果父组件一换名，所有子组件都要改。
- 父组件统一传
blockName或className，子组件只负责拼${blockName}__icon—— 但更稳妥的是父组件直接传完整类名：iconClassName="header__icon" - 不要在子组件里硬编码 block 名，比如
const className = 'header__icon'；它应该来自 props 或 context - 如果用 Sass，可以用
@include b('header') { @include e('logo') { ... } }，但编译后仍是扁平 class，不依赖 DOM 结构
header__logo 和 header-logo 有什么实际区别
区别在可维护性和工具链支持。BEM 的双下划线 __ 是约定，不是语法糖；它让 class 名自带语义层级，能被 PostCSS 插件、VS Code 扩展或 CSS 模块自动识别。
-
header__logo被postcss-bem识别为 element，能自动加前缀或作用域；header-logo只是普通字符串，工具无法区分它是 block 还是 modifier - 搜索代码时，搜
__logo能快速定位所有 logo 元素；搜-logo可能匹配到user-logo、footer-logo等无关项 - 团队协作中，看到
button__icon就知道它必须依附于buttonblock；而button-icon容易误以为是独立组件
遇到第三方组件嵌套时，BEM 怎么不破功
第三方组件（比如 react-select）内部 class 是固定的，你没法改它的命名。这时候强行套 BEM 反而增加耦合，正确做法是“隔离+覆盖”。
- 用 wrapper 元素包住第三方组件，wrapper 用 BEM 命名（如
form__select-wrapper），样式只作用于 wrapper 及其子节点 - 覆盖第三方 class 时，用属性选择器更安全：
[class*="Select-arrow"]比.Select-arrow更抗版本更新 - 如果第三方支持
classNamePrefix（如 react-select），就设成form__select，让它生成的 class 变成form__select__control，自然融入 BEM 体系
真正难的不是写对 class 名，而是判断哪些关系该用 BEM 表达、哪些该用 CSS 作用域或模块化隔离。层级感是设计出来的，不是 DOM 树照搬过来的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
