BEM 命名更可靠因其将样式归属、状态、层级锁死在名称中，不依赖 DOM 结构或上下文；而 .big-header-title 易因父级变更、嵌套加深或 JS 切换 class 导致失效。
为什么直接写 .header__title--large 比 .big-header-title 更可靠
因为 BEM 把样式归属、状态、层级全锁死在命名里，不依赖上下文顺序或 DOM 结构深度。一旦你用 .big-header-title，后续谁改了父级 class、谁加了嵌套、谁在 JS 里 toggle 了别的 class，它就可能意外失效。
实操建议：
- BEM 名字必须严格对应 DOM 元素角色：
block（独立模块）、element（用双下划线连接，如header__logo）、modifier（用双短横，如header--dark） - 禁止跨 block 写组合名，比如不要写
header__nav-item--active——nav应该是独立 block，它的 element 就该叫nav__item - 所有 modifier 必须作用于 block 或 element 本身，不能只靠 CSS 选择器“猜”状态，否则 JS 切换 class 时容易漏掉样式
遇到 Cannot resolve 'header__title' 这类构建报错怎么办
这不是 CSS 错误，是构建工具（比如 Webpack + postcss-bem 或某些 CSS-in-JS 库）在解析 BEM 命名时卡住了 —— 它默认只认 block__elem--mod 格式，但你写了 header__title--large，而 title 在配置里没被识别为合法 element。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 开发时样式正常，打包后部分 class 消失或未生成
- VS Code 插件提示 “Unknown BEM element”
- PostCSS 插件报
Invalid BEM node
实操建议：
- 检查你用的 BEM 工具是否支持自定义 element 白名单；例如
postcss-bem需显式配elements: ['title', 'logo', 'nav'] - 避免用缩写或模糊词当 element 名，比如别用
hdr__ttl，工具很可能不识别ttl - 如果用的是 CSS Modules，确保文件名符合约定（如
Header.module.css），否则某些 loader 不会启用 BEM 解析
要不要把 BEM 写进 CSS 变量名里，比如 --header__title-font-size
可以，但得小心变量复用场景。BEM 强绑定结构，而 CSS 变量讲究跨组件复用，两者逻辑冲突点就在“重命名成本”上。
使用场景：
- 仅用于单个 block 内部精细控制（如
Card的阴影、圆角、文字行高）—— 这时--card__body-padding是安全的 - 需要被其他 block 覆盖或继承时（比如全局字体大小），就该退回到语义化变量名，如
--font-size-lg，而不是--header__title--large-font-size
性能影响：
- 变量名越长，CSSOM 构建时字符串比对开销略增（微乎其微，但大量变量时可测出毫秒级差异）
- 更关键的是维护成本：一旦改了 block 名，所有带
__的变量都要批量替换，IDE 查找替换还容易误伤注释或字符串
JS 动态添加 modifier 时，为什么 el.classList.add('header--scrolled') 有时不生效
不是 JS 写错了，是 CSS 优先级或命名一致性断了。BEM 的 modifier 生效前提是：它对应的 CSS 规则必须存在，且没有被更高优先级的规则覆盖。
容易踩的坑：
- CSS 文件里写了
.header--scrolled，但实际 HTML 是<div class="Header">（首字母大写），大小写不一致导致匹配失败 <li>用了 SCSS 嵌套写法：<code>.header { &.header--scrolled { ... } }，结果编译后变成.header.header--scrolled，要求两个 class 同时存在，但 JS 只加了一个 - 第三方 UI 库的 reset.css 或 normalize.css 里有通配符规则（如
[class*='--']），意外重置了你的 modifier 样式 - JS 中统一用常量管理 modifier 名：
const HEADER_SCROLL_MOD = 'header--scrolled';，避免硬编码拼错 - 在 DevTools 里右键元素 → “Force state” → 勾选
:hover等，快速验证 CSS 规则是否真被加载 - 上线前跑一次
grep -r 'header--scrolled' src/，确认 JS 和 CSS 两端名字完全一致（包括连字符数量）
实操建议：
BEM 最难的不是记规则，是每次写 class 时都得想清楚：这个东西是不是真的属于那个 block，还是它早该拆成新 block。一旦开始偷懒用 utils__text-center 这种万能 class，整套命名逻辑就从根上松动了。
