UI风格命名惯例（前端/设计/组件库通用，包含命名思路、命名范式、实例、避坑）

适用场景：组件名、CSS类名、主题名、PRD文档、Figma组件命名、变量名；区分设计风格名 和 代码命名规范

一、主流命名范式（优先选一种，项目内统一）

1. Kebab-case（短横线分隔，最常用：CSS / Figma / class）

规则：全部小写，单词用 - 连接，无大写
示例：
mini-menu、primary-button、card-shadow、dark-theme

2. CamelCase 小驼峰（JS/TS变量、组件实例、函数）

规则：首字母小写，后面每个单词首字母大写
示例：
miniMenu、primaryButton、darkTheme

3. PascalCase 大驼峰（组件类名、React/Vue组件、类型定义）

规则：首字母大写，后续单词首字母大写
示例：
MiniMenu、PrimaryButton、DropdownMenu

4. Snake_case 下划线（SCSS变量、常量、后端、CSS变量）

全部小写，下划线分隔
示例：
mini_menu、primary_color

5. UPPER_SNAKE_CASE 全大写下划线（常量、配置）

--COLOR_PRIMARY: #1677ff;

✅ 行业通用约定（记住这个规则）

• CSS class / Figma图层：kebab-case
• JS变量：camelCase
• 组件名（Vue/React）：PascalCase
• 常量、配置参数：UPPER_SNAKE_CASE

二、UI风格命名的2套思路（风格主题 / 组件变体）

思路A：主题/整体风格命名（整套系统视觉风格）

通用形容词前缀（用来描述风格）

完整主题示例：
compact-dark-theme 紧凑深色主题

思路B：组件变体命名（同一个组件多种样式，组件库最常用）

固定结构模板：
[size]-[variant]-[component]

size尺寸：xs / sm / md / lg / xl
variant变体：primary / secondary / outline / ghost / filled / text
component：组件名称

示例：
sm-primary-button 小尺寸主按钮
md-ghost-mini-menu 中等尺寸幽灵样式迷你菜单

尺寸标准缩写（组件库通用）

• xs extra-small 超小
• sm small 小
• md medium 中（默认，可省略）
• lg large 大
• xl extra-large 超大

组件变体 variant 通用关键字（高频）

示例：sm-outline-mini-menu 小型外框式迷你菜单

三、风格体系命名（整套UI体系名字，用于项目/产品）

适合你做aiwaly、月影系列这类品牌UI：

• 命名原则：简短、英文单词，避免生造长词，不要带版本号
  示例：
  Yueying（月影，PascalCase作为主题名）
  yueying-light、yueying-dark
yueying-compact

禁止：yueying-v2-theme（版本放配置，不要写进风格名称）

四、状态后缀（追加到组件后面，描述交互状态）

放在最后：-active -hover -focus -disabled -expanded

.mini-menu-item-active
.mini-menu-item-disabled

五、推荐的命名层次模板（直接套用）

模板1｜CSS class (kebab)

[variant]-[size]-[component]-[state]
例：ghost-sm-mini-menu-expanded

模板2｜前端组件（PascalCase）

[Variant][Size][Component]
例：GhostSmMiniMenu

模板3｜主题名称

[brand]-[style]-[tone]
例：yueying-compact-dark

六、避坑规则（非常重要，很多项目踩雷）

1. ❌ 不要用颜色、像素值命名（不要写 .red-button .w200-card）

   错误：red-menu
   正确：danger-menu（语义，而不是视觉颜色，后续换色不用改类名）

2. ❌ 不要写实现细节：shadow1、border-radius-4，语义优先
3. ✅ 语义优先，而不是描述外观
4. ❌ 不要中文拼音混搭英文（除非品牌专有名词如 yueying）
5. ❌ 不要缩写自创词，团队看不懂，只用行业通用缩写 xs/sm/md

七、示例合集（结合前面菜单术语）

八、Figma设计组件命名惯例（配套）

Figma推荐：[Component]/[Variant],[State]
例：MiniMenu / Compact, Dark