.header__title--large更可靠，因其将语义与状态封装于单个类名，不依赖DOM结构层级，避免因组件嵌套或结构变动导致样式失效，符合BEM原子化、低耦合的设计本质。
为什么.header__title--large比.header .title.large更可靠
因为后者依赖 DOM 结构层级，一旦中间加个包裹元素或组件重用时结构微调，样式就失效；前者把语义和状态全塞进类名里，不查 HTML 也能猜出用途，也不怕父级改名。.header .title.large这种写法在 React 组件嵌套深、动态渲染常见，实际维护中掉坑率极高。
实操建议：
- 所有组件级样式只用单个类名，禁止出现空格分隔的选择器（即不用后代/子代/兄弟选择器）
- 修饰符（如
--hover、--disabled）必须和元素名绑定，不单独存在，避免.disabled这种全局污染型类名 - BEM 的
__和--是约定，不是语法糖——CSS 里它们就是普通字符，但团队必须统一，否则.btn__icon和.btn-icon混用会直接导致样式不可预测
:is() 和 :where() 能替代 BEM 吗
不能。这两个伪类解决的是选择器权重和重复书写问题，比如用:is(.btn__primary, .btn__secondary)收拢共用样式，但它没解决“类名含义模糊”和“结构耦合”这两个核心痛点。你依然得写.card .content，而 BEM 强制你写.card__content，从源头切断对嵌套的依赖。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 用
:is()包了一堆 BEM 类，结果发现.modal__footer__button这种命名反而暴露了错误的嵌套假设（footer 里不该有 button 的子模块） - 以为
:where()权重为 0 就能随便写深层选择器，但可维护性没变——下次重构 DOM 时，照样要翻 JS 找哪个地方动态加了.active - 工具链（如 PostCSS 插件）对
:is()支持仍不一致，Safari 15.4+ 才稳定，老项目上线前得测
React 里 classnames 库怎么配合 BEM 写不出错
关键不是拼字符串，而是把 BEM 的三段式逻辑提前固化成函数，避免手写时漏掉__或错用--。比如cn('btn', { 'btn--primary': isPrimary })看着省事，但btn--primary其实该是btn__text--primary才对——按钮主体和文字是不同元素。
使用场景建议：
- 每个组件配一个
bem.ts或utils/bem.ts，导出block('button')这类工厂函数，返回带element和modifier方法的对象 - JSX 中只调用
button.element('label').modifier({ active: true })，不手动拼button__label--active - 禁止在
classNames里传入带空格的字符串，比如classNames('btn__icon btn__icon--small')——这等于退化回传统写法，失去 BEM 的原子性
PostCSS 插件 autoprefixer 对 BEM 有影响吗
没有直接影响。autoprefixer 只处理 CSS 属性前缀（如display: flex → display: -webkit-box），不碰选择器。但容易被忽略的一点是：BEM 类名越长，CSS 文件体积增长越明显，尤其当用@apply大量复用 Tailwind 风格工具类时，.c-card__header--sticky这种名字在压缩后仍比.ch多占不少字节。
性能与兼容性提醒：
- Chrome DevTools 的 Elements 面板里，长类名会让 DOM 树视觉上更拥挤，排查时容易看串行——这不是 bug，但真实影响效率
- 某些 SSR 框架（如 Next.js App Router）在服务端生成 HTML 时，类名长度会影响首屏 HTML 体积，进而拖慢 TTFB，别小看每个类名多出的 3–5 字符
- 如果团队已用 CSS-in-JS（如 Emotion），BEM 命名规则要同步到
css`模板字符串里，而不是靠 JS 对象 key 自动转——css({ '&__content': {...} })这种写法会破坏 BEM 的静态可分析性
