统一设计语言需通过严格bem命名落地：block名须与设计系统组件名完全一致，element和modifier须语义化，工具链须校验bem语法，js类名拼接须函数化，css modules仍用完整bem名。
统一设计语言不是靠设计师出一份文档就能落地的，而是靠每个类名在代码里“说话”——user-profile-card__avatar--compact 这种写法，能让前端、设计师、测试在同一时刻指向同一个视觉单元，不用猜、不翻文档、不问人。
Block 名必须和设计系统组件名完全一致
设计稿里叫“用户资料卡片”，代码里就不能是 profile-card 或 user-card，而必须是 user-profile-card。大小写、连字符、单复数全要对齐，否则 Figma 插件导出的类名和实际 CSS 文件对不上，DevTools 里搜不到对应样式。
- 组件目录名 = Block 名：
/components/user-profile-card/→ 主样式文件必须叫user-profile-card.css - 禁止用缩写或泛义词：
card、profile、user-box都不合格，它们无法在设计系统中被唯一索引 - 设计师标注“Primary 按钮”时，前端立刻知道该挂
button--primary，而不是btn-primary—— 前者是设计系统的状态开关，后者是某人某天随手写的缩写
Element 和 Modifier 必须反映语义，不是 DOM 路径或视觉参数
user-profile-card__avatar--compact 里的 --compact 是一种可复用的状态描述，不是 --size-32px 这种硬编码尺寸。前者能随主题、断点、设备自动适配；后者一换单位就得全局搜替换，且语义断裂。
- Element 名不能脱离 Block 独立存在：
avatar不合法，user-profile-card__avatar才对；comment-item__avatar是另一个 Block 的 Element，不能共用同一套样式规则 - Modifier 只表达变体或状态：
button--disabled✅，button--blue❌（颜色是主题层的事）；input--search✅，input--large❌（尺寸应由布局容器控制） - 禁止三层嵌套：
modal__content__title违反原则，应改为modal__title或拆出新 Blockmodal-title
工具链必须把 BEM 当语法边界来校验，不是风格提醒
__ 和 -- 不是“看起来整齐”，而是 PostCSS、Stylelint、VS Code 插件识别语义结构的锚点。写成 .menu_item 或 .button-disabled，工具就当普通字符串处理，没法自动报错、补全或重构。
- 用
stylelint-selector-bem-pattern插件，配置{ "componentName": "[a-z][a-zA-Z0-9]+", "styleType": "bem" }，它会立刻拦截：.header .logo（结构选择器）、.btn-primary（非 BEM 格式）、CardTitle（大驼峰） - CI 流程中跑
npx stylelint "**/*.{css,scss}"，失败即阻断合并——比人工 Review 快 10 倍，且不漏 case - 禁用 Prettier 的
htmlWhitespaceSensitivity宽松模式，避免格式化后破坏class="block__elem block__elem--mod"的空格结构
JS 中拼接类名必须函数化，不能硬编码字符串
写 className={`card__body ${isCollapsed ? 'card__body--collapsed' : ''}`} 看似省事，但块名改了（比如 card → content-card），所有模板里漏改一处，样式就断掉，且无任何构建报错。
- React 推荐用
clsx：className={clsx('user-profile-card', { 'user-profile-card--featured': isFeatured })} - Vue 3 用对象绑定：
:class="{ 'user-profile-card--featured': isFeatured }" - 禁止在 JS 里调
el.classList.add('user-profile-card__avatar')—— 应抽成常量或工具函数，如getAvatarClass() - CSS Modules 下仍坚持写完整 BEM 类名：
.user-profile-card__avatar✅，.avatar❌（失去上下文）
最容易被忽略的是：BEM 不是给机器看的哈希前缀，也不是为了“让 class 名变长”。它是团队在没有类型系统、没有作用域、没有实时协作提示的 CSS 环境里，唯一能靠肉眼快速定位、推理、信任的语义锚点。一旦块名和设计系统脱钩，或修饰符开始混入像素值，这套语言就失效了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
