BEM高效管理靠三件事：__和--作语法锚点被工具识别、选择器必须扁平、每个class可反推所属block；.card .card__title是反模式，因空格导致回溯失效且无法校验DOM位置，应改用.card__title单类名或.card--featured .card__title修饰符组合。
直接说结论：BEM 类选择器的高效管理，不靠“写得更长”，而靠三件事——__ 和 -- 作为语法锚点被工具链识别、所有选择器必须扁平（禁止后代嵌套）、每个 class 必须能反推其所属 block。
为什么 .card .card__title 是反模式
它看起来有层级，实则破坏 BEM 封装性：编译后生成的是两个独立类名 + 一个空格连接的选择器，浏览器匹配时会回溯父节点，且无法从 .card__title 反推出它是否真的在 .card 内部生效。一旦 DOM 结构微调（比如加个 wrapper），样式就静默失效。
更严重的是，这种写法让 lint 工具无法判断 .card__title 是否被正确使用——它只认类名格式，不校验 DOM 位置。
正确做法是：
-
.card__title单独写规则，不依赖父类 - 需要视觉联动时，用
.card--featured .card__title这种 modifier 组合，而非结构嵌套 - SCSS 中只允许
&__title，禁止&__content .card__title
如何用 stylelint-selector-bem-pattern 拦住错误类名
这个插件不是摆设，它靠正则硬匹配 __ 和 -- 的位置。一旦写成 .card-header-title 或 .button__icon_error，CI 构建直接报错。
配置要点：
- 规则设为
{"styleType": "bem"} - 必须在 CI 中跑
npx stylelint "**/*.{css,scss}" - 禁用
stylelint-disable对该规则的绕过（除非有明确例外文档）
漏掉一个 _ 或多写一个 - 都会被捕获，比如 .card--large--dark（嵌套 modifier）或 .btn__icon--loading（element 上挂了不该挂的 modifier）。
JS 动态类名怎么避免手拼出错
手写 className={`card__title ${isExpanded ? 'card__title--expanded' : ''}`} 看似简单，但实际埋了三个雷：大小写不一致、空格遗漏、modifier 挂错对象（card__title--expanded 应该是 card--expanded 控制整体）。
安全做法是封装生成函数：
const BLOCK = 'card';
const cn = (e, m) => `${BLOCK}${e ? '__' + e : ''}${m ? '--' + m : ''}`;
// 使用
className={cn('title', isExpanded && 'expanded')}
关键约束：
- 所有类名必须由
BLOCK常量派生，不能硬编码字符串 -
cn()不接受任意字符串，只接受预定义的e（元素名）和m（modifier 值） - 禁止在 JSX 中出现未经过
cn()处理的 BEM 类名
第三方组件怎么套进 BEM 体系
你控制不了 ant-btn 或 react-datepicker 的输出类名，但可以控制它的容器。BEM 不要求改造外部代码，只要求你的作用域清晰。
正确姿势：
- 包一层 wrapper block：
- 用属性选择器或子选择器做有限样式干预：
.form-field--date .ant-picker-input input（仅限必要覆盖） - 禁止给第三方类加
!important，改用更高 specificity 的 BEM 类（如.form-field--date__input）接管关键样式
真正容易被忽略的点是：wrapper block 的命名必须语义化，.form-field--date 可以，.datepicker-wrapper 不行——后者没表达业务归属，后续无法收敛、无法主题化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
