手把手带你打造自己的UI样式库（终章）

知识点汇总

页面基础模型

页面的基础模型部分介绍的是在浏览器中渲染一个页面时用到的建模方式。在这个模型中，它会把每个元素涉及成一个带有尺寸、边距的盒子（盒模型）；还设计了每个盒子排布的方式（定位）；同时这些盒子还可以有层叠关系，就要处理他们之间的叠加方式（层级）；此外，这个模型中还包含了页面的渲染方式（页面渲染机制）。这几种模型里都包含了什么具体内容，可以参考下图里的详细划分：

CSS 基础

CSS 基础部分讲的是 CSS 语言的特性，包括 CSS 选择器、样式优先级和计量单位。同时，这部分内容里还包含我们怎么去使用 CSS 语言，也就是 CSS 的代码规范。CSS 基础部分的知识点总结如下：

CSS 进阶

CSS 进阶里讲的将是一些对 CSS 语言的应用方式和技巧。这部分内容包含了多种屏幕适配方案，弹性布局的用法，盒模型的转换、过渡和动画效果以及其他一些比较杂的 CSS 技巧。这部分内容的知识点如下：

项目的集成

项目的集成并不是重点，但为了做出一个完整的项目，还是要对这块内容有所了解。这部分内容主要是对 Node.js 和 Npm 的使用。这部分内容比较少，具体涉及到的知识点如下：

思考点什么？

一、代码分层

通常我们会在逻辑语言里讲代码的分层，可以按着不同的方式进行划分，但在 CSS 里也可以进行简单的分层。可以把样式按基础样式、基础组件、业务组件和页面样式这几层进行划分，

• 基础样式：像水平居中、弹性布局、全屏遮罩和单行超出截断等这些比较固定的由几条 CSS 语句组合出来的样式，就可以单独实现出来，提供给上层组件进行调用。当然在 CSS 里样式的调用可能需要像 Sass、Stylus 这些与编译器来辅助实现，但也可以通过单独的类进行叠加。
• 基础组件：像按钮、图标等这类组件是比基础样式更高一级，已经能完成一定的功能，但这些功能都比较抽象，不涉及具体的业务。
• 业务组件：像列表、地图这类组件就已经和业务是有关联的了，所以业务组件会针对业务类型做一些定制化，比如打车的业务对地图的组件要求比较高，电商类的业务对商品的展示要求比较高，这些业务组件是在基础组件的基础上又上了一层。
• 页面样式：前端应用的最上层就是页面了，每个应用都是由页面组成的。设计的比较好的应用，只需要在页面中引入需要的组件，再加上少量代码做定制化的改动。而比较糟糕的设计就回把所有的代码都放到这一层，一个应用下来会发现列表的样式重复了十八次，按钮的样式重复了三十次。

二、区块划分

第二个可以思考的问题就是我们在做组件或者页面的结构设计时，要对页面的区域有个规划，不要一味的进行结构的堆叠。要实现整体结构，会把页面分成头部导航、内容区、尾部菜单和遮罩层这四部分区域，而在内容区里又会使用 Panel 面板组件把每个区域进行分割，甚至当 Panel 面板里的内容比较多时，还会进一步的分割。这样做的好处一方面是可以清晰的看出每个部分的结构，另一方面是每一块内容都有一个边界，即能对生效的空间进行限定，还可以通过改变容器上的类来控制里面组件对应的状态。

三、扩展

最后要思考的是我们这个框架怎么扩展。单纯的增加样式组件已经不算挑战了，但我们还可以做的是给样式添加上灵魂，也就是加入 JS 的逻辑，把它变成一套 JS 组件库。这个时候就又要选择方向了，要选择一个 JS 技术栈进行实现，可以是 VUE、React 或者原生 JS，做这个选择的时候就要看自己的业务都是用哪个技术栈来实现的。