设计系统中的文件怎么命名？ (BEM) 命名，和原子设计命名法

通常在设计系统建设过程中，通用的文件命名格式以快速找到所需的的组件和所处的位置很重要，这也是一种基本的规范，允许您以您和您的团队可以高效工作的方式命名您的文件，特别是当你拥有大量所需UI组件（文件、层、文件夹、屏幕、对象......）时，这有助于快速定位到他们，下面一起看看在设计系统建设中的文件怎么命名的？命名规则是怎样的？

命名约定的结构
合理规划设计组件的命名结构很重要，不仅有助于在大量实体之间快速定位，还可以让您了解它们之间的关系。在定义命名约定时，其中涉及两件事：
1、对UI组件进行分组
2、命名单个组件

基于原子设计的理念，给出如下的命名结构：

结构：序号_UI组件名称_版本（如有）
01_UI组件名称
02_UI组件名称/分子
03_UI组件名称/分子/原子

示例：
01_留言卡
02_留言卡/按钮-标准
03_留言卡/按钮-标准/颜色、排版

 (BEM) 模型：
BEM 代表块、元素和修饰符。在设计和开发中广泛用于命名组件和元素。

让我们看一下BEM 结构：
B （Block）代表块，称为模式或组件，自包含元素，如导航、菜单......等元素，或任何独立实体，如按钮。
块元素本身就有意义。
命名：组件/标题 
比如：导航菜单， 命名为 “Header”,   底部， 命名为 “Footer”


E （Element）代表元素，指的是构成组件的单个实体。
命名：组件/标题/h1

M （Modifier）代表修饰符， 是指允许在组件中进行更改的元素。
命名：组件/按钮/主要

1.命名设计中的组件
命名约定使您的UI设计界面更易于被不同岗位的同事认识，UI设计系统也更易于理解，在任何原型制作工具中，都可以使用相同的父子约定。

按照以下步骤命名设计中的组件：

颜色：
结构：颜色/颜色名称/用途/变化
示例：color/Deep blue/primary/default

排版：
结构：类别/类型/大小/样式/对齐方式
示例： mobile/para/16px/bold/right；

图像：
结构：图标/大小/图标名称/图标状态
示例：Icon/20px/Delete/Active

2.组件的命名约定
系统中的蓝色主按钮应命名为 button/primary/default，但不要提及其颜色。当默认颜色发生变化时，此命名结构可帮助您改进组件。
结构：组件/类型/元素/变体b．
例子：nav/header/mobile/dark;   cards/media-block/complex/web

3. 设计模式的命名约定
结构：模式/模式类型/状态
示例：Patterns/table/empty

4.开始创建屏幕中的所有组件和设计模式，并根据定义的命名约定进行命名

BEM 是在设计中命名组件的最佳方式，因为它有助于可扩展和自适应命名，但是采用原子设计的命名方法也仍然用于对组件进行命名，根据个人所需和项目情况选择。

实践总结：
1、在项目开始之前，规划好命名规则和约定
2、规划具有与特定的文件夹、文件或组件相关的命名
3、避免文件、文件夹和组件的长名称
4、通过在开头给出阿拉伯数字（01_Wireframes、02_Visuals），确保按照您遵循的过程对文件夹中的所有文件进行排序
5、拥有所有文件和文件夹的版本名称，并将所有相似类型的文件收集到一个文件夹中
6、确保在设计工具上的屏幕之前确定图层的命名规则
7、在创建图层、元素和组件时一定要命名它们
8、使用设计和开发团队看得懂和理解的名称。
9、用连字符或正斜杠分隔单词