bem类名写错一个下划线就导致工具链失效，因其解析逻辑完全依赖__和--作为唯一分隔符；user_name会被误判为块user+元素name，card-element被当作普通块名，stylelint、postcss插件、vs code bem helper均无法识别结构，正则匹配失败后直接跳过校验。
为什么BEM类名写错一个下划线就导致工具链失效
BEM的解析逻辑完全依赖__和--作为唯一分隔符。写成user_name或card-element，stylelint、PostCSS插件、VS Code BEM Helper都会无法识别结构——它不是“差不多就行”，而是正则匹配失败，直接跳过校验。
-
user_name会被误判为块名user+ 元素name，但实际name根本不是user块的合法元素 -
card-element会被当作一个普通块名，无法提取element层级，postcss-bem-linter在CI阶段直接报Unexpected BEM structure - VS Code的Auto Rename Tag插件只监听
__/--模式，改header__logo不会同步更新header-logo对应CSS
修饰符加在块上还是元素上？别让状态逻辑藏在父级里
修饰符必须作用于**具体发生状态变化的UI单元**，不是“整个组件”。比如卡片里只有标题需要禁用样式，就该用card__title--disabled，而不是card--disabled再靠CSS降权控制子元素。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 错误写法：
.card--disabled .card__title { opacity: 0.5; }——破坏BEM“样式隔离”原则，后续单独启用card__title时需额外覆盖 - 正确路径：哪个视觉单元变了，就在它的class上加修饰符；状态分散到各子组件，JS逻辑也更易测试
-
card__title--disabled--bold是反模式；若设计明确要求“禁用态下的粗体标题”，应合并为card__title--disabled-bold，且必须有对应CSS规则
老项目增量接入BEM最卡在哪？不是技术，是类名混用
全量重命名不现实，真正崩坏点在于新旧类名并存：.user-list .item和.user-list__item同时存在，开发者无法判断该用哪个，最终谁手快谁提交，规则形同虚设。
- 策略核心：停止新增非BEM类名。新功能、新组件、修改过的组件强制用BEM；遗留代码不动，但禁止在老模块里新增
.float-left这类工具类 - 用
stylelint-selector-bem-pattern配置strict模式，在保存时立刻报错：Unexpected selector ".user-card h3" - 对全局重置类（如
.sr-only、.clearfix）豁免BEM，但必须归档到base/目录并加注释说明用途
React/Vue里拼接BEM class名，为什么不能手写模板字符串
className={`${base} ${base}--${size}`}这种写法会让IDE无法跳转、搜索失效、重构时漏改一处就埋雷。BEM的价值之一是“可追溯”，而字符串拼接直接切断了这个链条。
- React推荐用
clsx：className={clsx('button', { 'button--loading': loading })} - Vue 3用对象绑定：
:class="{ 'modal__overlay--visible': visible }" - 禁止在JS里硬编码
el.classList.add('card__body')——应抽成常量或工具函数，例如const CARD_ELEMENTS = { body: 'card__body' } - 如果用
styled-components，先用clsx生成class串，再传给className，别塞进模板字面量里
class="button--primary"没用，必须是class="button button--primary"，否则删掉修饰符整个块就崩了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
