bem类名天然不冲突，因为浏览器只匹配完全一致的字符串，而block__element--modifier将作用域编码进名称；如user-card__avatar与profile-card__avatar是两个独立类名，互不干扰。
为什么 BEM 类名天然不冲突
因为浏览器只认类名字符串是否完全一致，而 block__element--modifier 强制把作用域编码进名字里。只要 block 名不同（比如 user-card 和 profile-card），哪怕都叫 __avatar，生成的 user-card__avatar 和 profile-card__avatar 就是两个独立字符串——它们根本不会被同一条 CSS 规则命中。
哪些写法会让 BEM 失去隔离能力
不是 BEM 本身失效，而是人没写对。常见破规行为包括：
-
.card .title：后代选择器脱离 BEM 原则，HTML 加个 wrapper 就失效 -
button--primary：缺 block 前缀，--primary没绑定上下文，可能被其他button--primary覆盖 -
.user-card { .avatar { } }：SCSS 嵌套编译出.user-card .avatar，破坏扁平结构 -
.search-form__input_error：单下划线非标准，应为search-form__input--error
JS 动态拼接 class 时最容易漏掉什么
手拼字符串看着快，但极易出错：
- 漏空格：
className={`search-form__input${isDisabled ? '--disabled' : ''}`→ 实际变成search-form__input--disabled或search-form__input，但中间没空格就串成一个类名 - 大小写混用：
SearchForm__Input和search-form__input在某些构建环境里不等价 - 修饰符单独使用：
search-form__input--disabled没和search-form__input共存，基础样式（如 padding、border）可能丢失
BEM 真正难的不是记规则，而是每次写前多问一句
写 class="header__logo" 之前，得确认：header 是不是当前功能单元的合法 block？__logo 是不是它内部不可拆分的子部件？如果这个 logo 同时出现在 footer 里，那它就不该属于 header，而应另起一个 brand-logo block。
修饰符也一样：--large 描述的是尺寸状态，还是视觉风格？不同开发者对“large”的理解可能不一致，导致样式不收敛。真正容易被忽略的，是 block 的语义边界——它不是 HTML 结构的物理容器，而是功能职责的最小闭环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
