手把手带你打造自己的UI样式库 | 完结

市面上开源的 UI 框架有很多，但一般规模比较大的公司都会选择自建一套 UI 框架。自建框架的好处有：

• 源码可以改动
• 可以完全满足产品的设计风格
• 完成功能定制化
• 利于风险控制

自建框架的优势如此突出，作为一个前端开发人员，尤其是想从初级前端开发向中级前端开发进阶，学会自己制作 UI 框架是一项必备技能。能够成为一个大公司的前端 UI 库开发参与者，甚至是发起人、主导者，对于个人的职场提升，有着举足轻重的作用。

本期专栏学习方法分为 “夯实基础 —— 实战 —— 理解设计思路 —— 项目拓展” 四个层次。从熟悉基础的 HTML、CSS 知识点开始，实战整合每一个 UIDEMO 组件，理解 UI 框架的设计思路到学会开发方法进行项目扩展、开发自己需要的组件。循序渐进让同学们了解一个 UI 框架的整体开发过程。

案例主要实现的是一个移动端网站的样式框架。为了让同学们把注意力集中在样式开发，核心项目只使用 HTML 和 CSS 技术进行实战。在专栏的最后部分，对部分周边技术栈（Nodejs、打包工具、JS 等）进行参考应用，让同学们了解此 UI 框架如何与其它技术对接。

因为希望同学们可以利用碎片化时间灵活学习，本专栏尽量减弱上下文的内容依赖，从而实现让大家可以在工作之余进行充分学习与实战，理解开发一个定制化 UI 框架的思路和方法，并同时掌握里面涉及的 CSS 相关知识，相信一定会对大家的前端技能进阶大有帮助。

专栏模块：
专栏布局基本按开发顺序进行，共分为七个模块：

• 开篇：本模块为项目开篇，主要为理论性内容，包括课程的基本情况、关于 UI 框架的理解和 UI 框架设计的内容。
• 磨剑：本模块主要内容为归纳知识点，旨在帮助打好基础，了解必要的 CSS 基础知识与规范，以及 HTML 基础知识点。
• 列阵：本模块进入专栏主题，主要内容为优化移动端样式的基础布局，包括 CSS 规范要求的基本内容、整体页面布局和一些公共样式等。
• 操练：本模块主要内容为开发移动端内一些常用组件的样式，比如网格布局、列表、菜单、信息提示和文本处理等技巧类的应用。
• 集结：本模块主要内容为如何整合分散 Demo 为可用 UI 框架，并介绍该 UI 框架如何与其它技术结合。
• 实战：本模块主要内容为利用完备的 UI 框架进行页面开发实战。
• 复盘：本模块为专栏收尾，对专栏内容进行总结。