4.1 UI组件库元素规范设计

UI组件库元素的规范设计是提供一套标准化的界面元素和交互模式。UI组件库元素设计通常包括各种常见的界面元素，如按钮、输入框、单选框、复选框、模态框等，并定义它们的外观、行为和样式规范。其中包括以下内容：

尺寸和间距： 定义组件的标准尺寸和内部间距，确保在不同设备上展现出一致的外观。
颜色和样式： 确定组件的标准颜色、辅助色、背景、边框和阴影效果，以及悬停或激活状态下的样式变化。
字体和文字： 规定组件中文字的标准字体、大小、颜色及对齐方式，包括常见的标题、正文和链接样式。
图标和图像： 定义组件中应用的图标和图像的样式，包括大小、填充色等规范。
交互行为： 描述组件的交互行为，例如按钮的点击效果、输入框的聚焦状态等，确保统一的用户体验。
可访问性规范： 确保组件在视力障碍用户或使用辅助技术的用户群体中具有良好的可访问性，例如合适的焦点状态和文字说明。

通过以上几个方面进行规范化设计，UI组件库能够为开发人员提供清晰的指导，确保在开发过程中准确地实现设计师所期望的视觉和交互效果。

为了能够更清晰的了解到UI组件库的设计规范，笔者为大家准备了一套UI设计稿，供大家开发参考，如图所示。

4.2 BEM命名规则

BEM是由Yandex团队提出的一种CSS命名方法论，即 Block（块）、Element（元素）、和 Modifier（修改器）的简称，是OOCSS方法论的一种实现模式，底层仍然是面向对象的思想。下面我们以Tabs组件为例，理解 BEM 的使用方法用核心思想，如图所示。

Tabs是一个完整的组件可以理解为一个模块Block，代表一个逻辑或功能独立的组件，是结构、表现和行为的整体，可定义classname类名为：a-tabs；其中每个切换的标签是一个Element，可以理解为Block里面的元素，可定义classname类名为：a-tabs__item；Modifier用于描述一个 Block 或者 Element 的表现或者行为，如图4-4改变文字颜色样式的微调， Modifier只能作用于 Block或者 Element且不能单独存在的； BEM 规范下 classname 的命名格式为：

命名格式：block-name__element-name--modifier-name_modifier_value：a-tabs__item--size_mini。

所有组件的命名均使用小写字母，复合词使用连字符 "-" 连接
block与Element之间使用双下画线 "__" 连接。
modifier与Block/Element 使用双中横扛连接符 "--" 连接。
modifier-name 和 modifier_value 之间使用单下画线 "_" 连接。

BEM是由Yandex团队提出的一种CSS命名方法论，并不一定要严格遵守这些规则，可根据你的团队风格进行修改。

4.3 命名空间

UI组件库的命名通常是基于项目或者公司的命名规则。命名规则可以根据具体的应用场情和组织内部的代码规范来进行定义。通常情况下，命名应该简洁明了、符合规范，并且能够准确反映该组件库所包含的功能或者用途。例如，一个名为"Acme UI"的组件库可能使用"acme"作为其命名空间，但具体的命名通常需要根据项目的具体要求和规范来确定。

UI组件库命名空间的作用是确保在大型应用程序中不同部分的UI组件可以被正确识别和引用。通过使用命名空间，可以将不同部分的UI组件隔离开来，避免命名冲突和重复，从而提高代码的可维护性和可读性。命名空间还可以帮助开发人员更清晰地组织和管理UI组件，使其易于定位和使用。

根据上述介绍，笔者将以"a"作用UI组件库的命名空间，也是所有组件的"前缀"，如button组件为"a-button"、checkbox组件为"a-checkbox"。

UI组件库已经确定了命名空间的前缀为"a"，因此需将此前缀提取为公共化逻辑，作用于所有组件自动生成的规则，如代码清单所示。

js 复制代码

> packages/hook/use-namespace/index.js
// 默认命名前缀
export const defaultNamespace = "a";
// 命名空间
export const useNamespace = (block) => {
  // 命名前缀也就是命名空间
  const namespace = defaultNamespace;
  return {
    namespace,
  };
};
	
> packages/hook/ndex.js
export * from './use-namespace'

> packages/components/button/src/index.vue
<script setup>
  import { useNamespace } from '@ui-library/hook';
  const ns = useNamespace()
  console.log('命名空间>>>', ns.namespace)
</script>

hook目录下新建use-namespace目录并新建index.js文件。index.js文件中定义变量defaultNamespace，并定义值为"a"（第3行），接着定义useNamespace函数（第5行），该函数中将命名空间defaultNamespace赋给新的变量namespace（第7行）并将其返回（第8~10行）。

最后将use-namespace/index.js文件从hook/ndex.js导出，可供所有组件使用（第14行）。为了测试命名空间是否可用，可以将其引入到button组件并打印到控制台查看数据，如图所示。