直接用 .header 必然引发样式冲突，因其泛用易重复；BEM 通过 blockelement--modifier 强制明确作用域与上下文， 和 -- 是不可交换的语法契约，工具链依赖此结构校验；Vue/React 应用 clsx 或 bem 工具函数避免手拼错误；类名长度不影响渲染性能，但损害开发、构建与调试效率。
为什么直接用 .header 必然引发样式冲突
多人协作时，.header 这类泛用类名几乎必定重复定义：导航栏、弹窗标题、表格头部、卡片顶部都可能用它。CSS 是全局作用域，后加载的样式会无条件覆盖先加载的，且权重相同时完全依赖文件引入顺序——DevTools 里看到多个 .header 规则叠加，却无法快速判断哪条生效、影响了谁。
关键不是“能不能写”，而是“谁在用、在哪用、会不会被误伤”。BEM 的 block__element--modifier 结构强制回答这三个问题，让类名自带上下文。
__ 和 -- 的语义不能交换，否则工具链失效
BEM 的双下划线 __ 和双连字符 -- 不是风格偏好，而是语法契约。所有基于 BEM 的自动化工具（如 stylelint-selector-bem-pattern、VS Code BEM 插件、Webpack CSS 提取逻辑）都靠这个结构做正则识别和规则校验。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 把
.card__header--large写成.card-header--large，导致样式意外泄漏到非 BEM 区域（比如其他模块也用了.card-header） - 用
_替代--，部分老版 PostCSS 插件会把下划线当单词分隔符，匹配错位 - 嵌套修饰符：
.card__header--large--dark❌ → 应拆成两个独立类：.card__header--large .card__header--dark✅
Vue/React 中怎么避免手拼类名出错
在 JSX 或 Vue 模板里硬写 className="button__icon--left button__icon--loading" 容易漏掉空格、拼错、状态组合爆炸。重点不是“怎么拼”，而是“怎么声明”。
实操建议：
- 用
clsx（React）或classnames处理动态类名：className={clsx('button__icon', { 'button__icon--left': align === 'left', 'button__icon--loading': loading })} - Vue 中禁用自由
:class绑定，封装bem()工具函数：:class="bem('button', { icon: true, 'icon--left': align === 'left' })" - 禁止在组件内定义局部变量存类名（如
const iconClass = 'button__icon'），这会让 DOM 结构语义断裂，审查时无法一眼识别归属
类名太长会影响性能吗？真正卡点在哪
纯 CSS 解析层面，类名长度对渲染性能几乎没影响——浏览器匹配的是选择器结构，不是字符数。真正拖慢的，是开发期、构建期和调试期的隐性成本：
- 开发期：过长类名（如
product-list__item__image--rounded--shadow）增加键盘输入负担，Git diff 噪声大，typo 难被 lint 捕获（productt__item这类错误不会报错） - 构建期：若启用
cssnano的reduceIds，超长类名可能无法安全压缩 - 调试期：DevTools 自动折叠过长类名，
card__content__inner__text--highlighted看不到全貌，得手动展开 - 兼容性注意：老版 IE 对选择器总长度有限制，单个类名建议不超过 40 字符；复杂状态优先走 CSS 自定义属性或 JS 控制类切换
最常被忽略的一点：用 SCSS 的 &__item 嵌套看似省事，实则掩盖真实 DOM 结构——JS 查询 .menu__item 时可能匹配到非当前 block 的同名元素，破坏封装边界。
