组件库通用样式设计总结

本文转载于:猿2048网站➪https://www.mk2048.com/blog/blog.php?id=iah0c1102j

前言

作为前端UI组件库，从样式角度去看，应当满足两方面要求：一致性和可定制^[1]。

其实这两点也非常好理解，一致性保证了组件库视觉上保持一致，而不是东拼西凑，而且说得高大上一点可能还有规范可循。而可定制就需要组件库暴露接口，供开发者配置形成自己风格的组件库。

一致性

但是具体一致表现在哪些方面呢？对于设计师而言，会很清楚，但是对于我们前端开发人员而言，具体指的是哪些东西呢？我们又如何把这些东西转化为代码呢？这部分具体见设计规范部分。

可定制

根据可定制的粒度大小，可以分为组件层面的可定制和整套组件库的主题定制。有组件使用经验的同学都知道，使用具体组件时我们可以传入某些参数或主题参数，组件就可以呈现不同的表现。另外，一些有名的组件库也都提供了主题定制的相关方法，如 antd-mobile 、Vant 和 Element ，尤其是 Element ，提供了多种主题定制的方法。

设计规范先行

前面提到的一致性是由“设计规范”来保证的，其实这一块涉及到的内容非常多。可能在我们眼里就是组件库里的那套看似杂乱无序的通用变量（设计规范 ≠ 通用变量），但是其实里面还是有一些套路的，也建议多多和设计师沟通，产生思维碰撞，你会发现一些平时写代码过程中不一样的思维。在我和设计师沟通的过程中，这点体验非常深。

设计规范包含哪些内容？

那和组件库密切相关的设计规范体现在哪些方面呢？前几天饿了么前端架构师林溪在《Vue组件库建设实践》分享里提到有以下内容：

统一视觉样式
- 色彩
- 布局
- 字体
- 图标
统一交互动效
- 时长、缓动
- 移动路径
- 形变、编排

设计规范如何落地？

其实上面有一个关键词：统一。我们如何保证样式统一？没错，就是刚才提到的通用变量（但我仍然不会认同“设计规范 = 通用变量”，很难表达出这种感觉），以 antd-mobile 为例，具体包含以下内容^[2]：

颜色（字体、填充、全局、边框、透明度）
字体尺寸
字体族
圆角
边框尺寸
间距（水平、垂直）
高度
图标尺寸
部分组件样式

其实理解了设计规范，我们再来反过来理解组件库里面的通用变量就会感觉其实变量之间其实也是存在某种内在体系的，在写具体组件的样式时就更会或者更能遵守这套规范，而不是胡乱定义了。

主题定制

主题定制是大多数组件库都会提供的一个核心样式相关的功能。但是具体解决方案有许多，但无非有两种解决方式：

借助gulp/webpack等打包工具相关的插件，配置需要定制的样式变量，在打包时覆盖对应变量值；
手动修改通用变量，或者新写一套样式文件覆盖组件库样式。

具体可参照知名组件库做法：

不过，对于企业内部组件库而言，这一块其实要求并不强，相反对于一套组件库提供多套配色需求更高一点。这里指的配色和主题定制还是有区别的，因为配色要求不同“皮肤”的样式需要同时存在，而主题定制相当于就只有一套配色。

而如果采用多种配色的话，增加一套配色文件也可以达到“主题定制”的功能。

其他通用样式

除了设计规范里的相关样式外，其实还包含但不限于如下通用/复用样式：

reset / normalize
hairline
animation
util / mixins
clearfix
……

这里不仅仅组件库，一般项目中也会有这方面的通用样式，相信大家都明白，这里就不展开介绍了。但是这也很重要，是组件库样式基础的一部分！

代码结构

下面是借鉴知名组件库后设计的一个样式代码结构，供参考，供拍砖。

style
├── core
|   ├── animation.scss
|   ├── color-card.scss
|   ├── hairline.scss
|   ├── mixins.scss
|   └── normalize.scss
├── themes
|   ├── skin
|   |   ├── _brown.scss
|   |   ├── _green.scss
|   |   ├── _pink.scss
|   |   ├── ……
|   |   └── _white.scss
|   └── default.scss
├── core.scss
└── index.scss

另外，为了开发方便，组件相关样式变量都放在了组件代码目录，虽然会给后期维护（增加“配色”时需要更新每个组件样式特定代码），但是这种情况甚少。不过通用型组件库会将其写在通用变量中以方便主题定制粒度到组件层面。