关键在于将命名约束嵌入Figma工具链，通过正则校验、插件拦截与变量绑定实现自动化合规，而非依赖设计师记忆；否则易出现unnamed切图、蓝湖错位及CSS选择器失效等问题。
直接说结论：BEM命名规范要真正落地到Figma→代码流程，关键不是让设计师“记住规则”，而是把命名约束嵌进设计工具里，让不合规的图层名根本无法通过校验。
为什么Figma图层名和CSS类名总对不上
常见错误现象：unnamed切图、蓝湖资源错位、开发搜不到button--primary——根源往往不是设计师忘了写，而是图层名用了Blue Button或Group 4这类无语义名称，插件导出时直接 fallback 成默认名。
更隐蔽的问题是命名层级错位：比如设计师在 Figma 里把按钮图标命名为btn-icon-primary，但前端实际需要的是button__icon--primary（元素级修饰符）或button--primary__icon（块级修饰符挂载）。这种偏差导致 CSS 选择器无法命中，样式白写。
- Block 名必须与组件库文档完全一致，大小写、连字符、单复数都不能差，例如 Ant Design 的
ant-button不能简写成button - 禁止用视觉描述当图层名：
big-icon❌，应为icon--close✅ - 容器类 Frame 必须加
/前缀，如/section/hero-banner，避免被误识别为普通元素
Figma插件如何自动校验并生成合规BEM名
核心是用正则强制拦截非法命名。Figma 插件（如 css-class-name）可配置校验规则：
立即学习“前端免费学习笔记（深入）”；
匹配 BEM 格式的正则表达式：^[a-z][a-z0-9-]*(__[a-z][a-z0-9-]*)?(--([a-z][a-z0-9-]*))?$
- 开头必须小写字母，禁用数字或大写打头（
Button__text❌） -
__后只能跟元素名，不能再嵌套（card__header__title❌ → 应拆成card-header新块） -
--修饰符只能挂在块或元素后，不能跨级（button--primary__text❌） - 插件可配置自动补全：输入
button+ Tab → 补全为button__text或button--disabled
颜色/间距等设计值怎么映射成CSS变量
光有 BEM 类名不够，设计系统里的原子值（颜色、圆角、字体）必须能被前端一键提取。这就要求图层名本身携带可解析的语义前缀：
- 颜色图层必须用
color-开头，如color-primary-500、color-state-error；数值对应设计系统色阶编号，不能写color-blue-dark - 间距图层统一用
space-+ 8 的倍数，如space-16、space-24；插件读取后自动生成--space-md: 16px - 圆角和字体同理：
radius-8→--radius-md，text-h1→--text-h1-font-size - 所有这类图层建议单独建页（如 “Design Tokens”），方便插件批量扫描，避免混在组件页里漏采
类名和文件路径怎么对齐才能真·可定位
设计师在 Figma 里点“复制类名”，开发粘贴进 VS Code 搜索框却找不到对应 CSS 文件？说明类名没和工程结构绑定。
解决办法很实在：让每个 Block 名唯一对应一个 CSS 文件路径。
-
product-card→src/components/product-card/product-card.css -
form-field→src/components/form-field/form-field.css - 禁止泛化名如
card或input，它们无法反向定位到具体模块 - PR Review 时，前端可直接按类名 grep：
git grep "product-card__price"→ 精准定位到文件+行号，不用靠人肉翻
最易被忽略的一点：BEM 不是命名游戏，它是协作契约。一旦约定 button 对应设计系统里的 “Button” 组件页，那所有交付物——Figma 图层名、CSS 文件路径、Storybook Story ID、甚至 PR 描述里的截图锚点——都得指向同一个地方。断掉任意一环，还原度就不可验证。
