手把手带你打造自己的UI样式库（序言）

一、 写在前面的话

做前端开发的朋友，现在在写过 CSS时，大部分都是用些第三方的库。例如：Bootstrap，vant，easyUI，elementUI，layui之类的样式库或组件库。在使用这些组件库的时候，我们会发现用这东西写样式太省心了，按着文档给 HTML 上加几个 class，样式就神奇的出来了。

习惯了用这些框架开发以后还会有一种错觉，就是我的 CSS 水平不错了，还能拿出几个挺像样的页面显摆显摆。但实际上，这通常是错觉，当遇到现有 UI 框架满足不了的需求时，自己写起样式来又会感觉特别吃力。这时候又会陷入另一个极端，开始思考 “我怎么突然不会了？”，“写样式怎么这么难？”，“这需求有问题吧？”。

所以我在学习了在方面的知识后就准备写一些关于这方面的博客，也是加深自己对框架和对 CSS 的了解，提高自己开发样式的能力。
因为实现的是一个移动端网站的样式框架。项目核心部分只使用了 HTML 和 CSS，让我们将注意力放在样式的开发上。不过在最后也有和其他技术的对接。

二、关于UI框架的话

UI

先来说下 UI，这俩字母是 User Interface 的缩写，一般翻译成“用户界面”。UI 最主要的功能就是建立用户和系统后台之间的联系，系统后台通过 UI 把数据转换成可视化的内容展示给用户，同时用户也要通过 UI 把操作指令（包括数据）传给系统后台。

UI 框架

当我们在写页面时，最常见的是把设计图用 HTML 和 CSS 逐个还原出来。这个过程中我们会发现写了很多冗余的代码。比如 Button，每个页面用到的地方都要写上一堆 Button 的样式，慢慢的为了加快开发，就开始大量复制粘贴，最后就导致整个代码里有几十个很类似的 Button 样式。

页面中其实有很多像 Button 这种会用到很多次的组件，这时候我们会想到把这些具有共性的东西抽离出来，变成通用的组件。这样再写页面的时候，只要引入这些通用的组件，就不用在页面里重复写这些内容了。经过不断的提炼，就形成了 UI 库或 UI 框架。

使用框架的好处也是显而易见的：

• 标准化。UI 设计师应该有统一的设计标准的，当我们制作出一套前端框架的时候，就可以把设计标准转化成开发标准。
• 提高开发效率。使用了 UI 框架以后，所有通用的组件的开发量就省下来了，开发人员只需要做每个页面里那些没有共性部分的开发。
• 方便扩展。在使用了通用的框架后，我们具有共性的内容都集中在了一起。所以当我们要对产品做样式改造或扩展的时候，只需要对框架进行升级就可以了。不会像原始的那种开发方式中，哪怕改个按钮颜色，也要去每个页面里都改一遍。
• 提高页面加载速度。这个优点其实是被动的，当抽离出 UI 组件后，就会少了很多冗余代码，这样总体文件体积会变小。同时抽离出来的通用组件通过做缓存，加载速度还会进一步提高。但说这个优点是被动的，是因为这并不是我们做 UI 框架的初衷，通常不会为了提高加载速度而做一个 UI 框架。

三、构建自己的UI框架

为什么自建 UI 框架？

或许有人会说了市面上开源的 UI 框架有很多，为什么要去自己构建一套 UI 框架呢？首先构建自己的UI 框架，肯定是现有的开源框架不能完全满足业务上的需求。另外就是构建自己的框架有额外的好处，下面来说下自建框架的好处：

• 源码可以改动。我们在使用外部框架的时候，考虑到框架要升级，所以一般要求是不改动其源码。尤其是以 npm 方式安装的框架或插件，源码更是不能动的。所以如果是自建框架的话，我们是能控制框架内部代码的。
• 可以完全满足产品的设计风格。外部框架的样式是已经确定的，和实际产品的设计上肯定有差异。这个时候如果用外部框架就要在它上面以打补丁的方式进行样式覆盖，这种补丁多了以后也会成为一种灾难。
• 功能定制化。每个业务都有自己注重的地方，比如去哪儿网这类网站在日历和筛选这些功能上要求比较多，滴滴可能对地图方面的要求比较多。自建 UI 框架就是可以做到定制化，让框架的设计聚焦在自己业务的侧重点上，把要求高的组件做的更精细，把没用到组件剔除掉。
• 利于风险控制。外部框架的 Bug 也是一个比较大的问题，使用的时候遇到了只能等框架升级，或者也是用比较丑的补丁打上去。

UI框架的设计要求

当我们准备自建一套 UI 框架的时候，就要 UI 的几个贡献者一起合作，完成这个工作。在设计的时候，应该满足以下的要求：

• 友好。之前说过，UI 最重要的作用就是让用户用的舒服。所以在开发 UI 时首先要考虑的就是让里面的组件更人性化，比如不重要且过长的文本要折叠，列表滚动要有惯性，操作有反馈但不会过分打扰，等等。“友好”主要是对产品和UI设计师提出的要求，但前端开发人员不能觉得这不管我的事，团队里每个人都应该有自己的想法和提建议的义务。
• 美观。这是构成用户体验另外一个比较重要的因素。在广大的用户群体中，颜控还是不少的。美观的界面一方面能让使用者心情愉悦，同时还能体现出一个产品的精细度，提高用户对产品的信赖。
• 效率。我们开发一个 UI 框架，最主要的动力是可以提高开发效率。这一条才是对我们前端开发人员提出的要求。我们在对UI框架做代码设计的时候，考虑的一定是让代码更容易复用，并且对业务范围内的情况考虑的尽量全面。这样才能让使用这套 UI 框架的开发人员节省出在 UI 上的工作量，争取早日值回票价。
• 易扩展。最后还有一个要求，就是我们的框架要易扩展。我们在设计的时候，不能考虑到所有的业务情况，所以框架中的代码一定是有作用域限制的，容易被覆盖的，以及容易和其他框架或组件兼容的。这就要我们在写代码的时候要有一定的规范。

后续文章: 第一章.