BEM不制造焦虑，真正卡住开发的是缺乏可执行边界和即时反馈；card__title是否合理取决于card是否为独立可复用组件，否则硬套BEM反增负担。
别怕起名，BEM 本身不制造焦虑，人脑强行记忆规则才制造焦虑。真正卡住开发的不是“该叫什么”，而是缺乏可执行的边界和即时反馈。
为什么写个 card__title 都要犹豫三秒？
因为没把命名和真实组件绑定，block 名成了空中楼阁。你纠结的是“title”该不该加 __header 还是 __headline，但问题根源是：这个 block 是否真有明确复用场景？是否在代码里对应一个独立的 React 组件或 Vue 文件？
- 如果
card只出现在商品页，且没有单独抽离成Card.vue的计划，那它就不是真正的 block，硬套 BEM 只会徒增负担 - 如果
card已是独立组件，那card__title就是唯一合理答案——它不是“选出来的”，而是由 DOM 结构和组件边界决定的 - 团队对
card是否算 block 有分歧？说明还没达成“这个 UI 单元能被复制粘贴到另一个页面直接用”的共识，得先聊清楚再写代码
stylelint-selector-bem-pattern 怎么配才不让人想删掉它？
配错就等于给开发者设绊子。正则写成 "^([a-z][a-z0-9]*)(__[a-z][a-z0-9]*)?(--[a-z][a-z0-9]*)?$" 看似严谨，但会把 user-profile__avatar--large 拦住（因为 user-profile 含连字符），实际应允许中划线出现在 block 名里。
- 真正有用的配置是放宽 block 名限制，聚焦结构校验：
"^[a-z][a-z0-9-]*(__[a-z][a-z0-9-]*)?(--[a-z][a-z0-9-]*)?$" - 禁用所有裸名：
"selector-class-pattern": ["/^\.(?!.*(?:__|--)).+$/", { "message": "禁止使用无 BEM 结构的类名，如 .btn、.input" }] - VS Code 装 PostCSS Language Support 插件，
__和--实时高亮，拼错当场可见，比等 CI 报错快十倍
JS 里拼 className 为什么总出错？
不是语法难，是每次都要手动数下划线、连字符、空格，还容易漏掉 block 上下文。一个 button__icon--hidden 写成 button__icon--hide 或 button_icon--hidden，构建时不会报错，但样式就丢了。
立即学习“前端免费学习笔记（深入）”；
- 拒绝手拼字符串：
className={`button__icon${isHidden ? ' button__icon--hidden' : ''}`—— 缺空格、大小写敏感、无法复用 - 用常量封装：
const BLOCK = 'search-form'; const cn = (e, m) => `${BLOCK}${e ? '__' + e : ''}${m ? '--' + m : ''}`，调用cn('input', 'disabled')得到search-form__input--disabled - 如果用 CSS Modules，坚持
className={styles['search-form__input--disabled']}，永远不硬写字符串类名
最常被忽略的不是怎么写对，而是每次敲下 class= 前是否真问过：“这个样式属于谁？它会不会在别的上下文里意外生效？”——这句话没法自动化，但比所有工具都管用。
