Hello，大家好，我是 Rosen?？催^我視頻課的同學，對開篇這句問候應該會很熟悉。之前在慕課網上一共發了兩個基于前后端分離的視頻課程，一個是《手把手從 0 打造電商平臺 - 前端開發》, 這個課程基本是原生開發，使用了 Webpack 做代碼的模塊化處理和打包優化，實現了一套電商網站的用戶端前端。另外一個課程《React 從零打造企業級電商后臺管理系統》，這個課程使用了前端 React 框架，實現了一套電商的后臺管理系統。
做完這兩個視頻課程以后，我就一直在做自己的項目了。正好我的項目里需要做一套自己的 UI 框架，在這個框架成型以后，就打算把它分享給同學們。希望同學們通過這個課程能了解開發一個定制化 UI 框架的思路和方法，并同時掌握里面涉及的 CSS 相關的知識?？蚣艿拿纸?“推推 UI”，起的比較隨意，是跟著公司命名的。這門專欄課程就是帶著同學們了解下這么一個 UI 框架的整個開發過程。
參與過前端開發的同學，應該都寫過 CSS，也應該都用過像 Bootstrap、Ant-Design 之類的樣式庫或組件庫。在使用這些組件庫的時候，也應該會發現用這東西寫樣式太省心了，按著文檔給 HTML 上加幾個 class，樣式就神奇的出來了?！鞍?，這個組件不錯”，“咦，這么簡單”，“鵝妹子嚶”…… 使用一些優秀的框架的時候經常會有這樣的感嘆。
習慣了用這些框架開發以后還會有一種錯覺，就是我的 CSS 水平不錯了，還能拿出幾個挺像樣的頁面顯擺顯擺。但實際上，這通常是錯覺，當遇到現有 UI 框架滿足不了的需求時，自己寫起樣式來又會感覺特別吃力。這時候又會陷入另一個極端，開始思考 “我怎么突然不會了？”，“寫樣式怎么這么難？”，“這需求有問題吧？”。
所以我就準備做這樣一個專欄，帶著大家從頭去寫一個 UI 框架。從根本上了解框架怎么設計、CSS 樣式怎么寫、文件結構怎么組織等等。讓同學們親手開發一個 UI 框架，加深自己對框架和對 CSS 的了解，提高自己開發樣式的能力。有了這些能力，別人的框架想怎么用想怎么改都不是問題了，有需要的時候用上自己的框架也完全沒問題。
這次專欄要實現的是一個移動端網站的樣式框架。項目核心部分只使用了 HTML 和 CSS，盡量避開了其他技術棧（Nodejs、打包工具、JS 等），目的是讓同學們把注意力集中在樣式的開發上。不過在最后的部分，也會對這些周邊的技術有一些應用，讓同學們知道這個 UI 框架怎么和其他技術做對接。
考慮到這次課程的知識點比較分散，也盡量減弱了上下文的依賴，可以利用碎片化的時間來學習，所以這次就以專欄的形式呈現給大家。整個課程的布局基本是按著開發順序進行的，總共分了七章，下面分別介紹下這幾章內容:
第一章，開山。作為整個項目的開篇，這部分主要是理論性的東西，其中包括這個課程的基本情況，關于 UI 框架的理解，和 UI 框架設計上的內容。
第二章，磨劍。在動代碼之前，先要打好基礎，有一些必要的 CSS 和 HTML 基礎知識點要提前了解。這一章就是要歸納一下這些知識點，以便同學們進行后面章節的學習。這一章會包含 CSS 的基礎知識和 CSS 里的各種規范。
第三章，列陣。這一章開始進入正題，在這一章里我們的任務是把移動端樣式的基礎布局做好，包括 CSS 規范里要求的基本內容、整體的頁面布局和一些公共的樣式等，這是做一個 UI 框架的基礎。
第四章，操練。這一章里我們要開發移動端里一些常用的組件的樣式，比如網格布局、列表、菜單、信息提示和文本處理等。這章的內容會比較多，大部分都是技巧類的應用，這章完成以后，我們的框架就能大體成型了。
第五章，集結。經過前面的磨劍、列陣、操練，我們的框架已經有了雛形，但真正把分散的 Demo 變成一個能用的 UI 框架，還是要把它們整理起來。這一章就是要講一下怎么把之前分散的 DEMO 整合，并介紹這個框架怎么和其他的技術去結合。
第六章，實戰。經過前面實現各種 DEMO，再加上整合，整個 UI 框架已經完事了。到這我們就要拿出來寫幾個頁面來試試手了，看用上框架，開發頁面會不會很爽。
第七章，復盤。到這整個課程就真的要結束了，這章煽煽情，做個總結，來個致謝，也就差不多了。
我在這里說一下建議大家學習這門專欄的方法：
做到下面 4 項：夯實基礎、親自實現、理解設計思路、自行擴展。
夯實基礎
根據剛才的介紹，應該能知道本專欄課程是按著實戰項目走的，課程里不能對 HTML 和 CSS 的知識點做到完全的覆蓋。所以建議在學習這個課程的時候，如果是對樣式開發還沒什么概念的同學，最好能先去熟悉一下最最基礎的知識點，最起碼要知道每個屬性是做什么用的，這樣專欄里講到了還可以對知識點加深理解。這里推薦大家用 w3school.com.cn，把里面 HTML、HTML5、CSS、CSS3 這幾個分類下的基礎知識都過一遍，最好能把里面的示例也跟著做一下。
親自實現
在這個課程里面會實現很多 UI 組件，這些組件的開發過程中也會對應很多的知識點。同學們在學習的時候一定要把涉及的知識點理解透，并把每一個 DEMO 也都拿出來試一試，最好是能做到看完以后自己再默寫一遍。如果只是看的話，等看完也基本忘的差不多了。
理解設計思路
這個課程中，和知識點一樣重要的就是一個 UI 框架的設計思路了。設計思路不一定是在開發 UI 框架中才有用。理解以后，我們在平時寫頁面樣式的時候也一樣可以借鑒。
自行擴展
這個項目里做的是一些比較常用的組件，同學們在學會開發方法后，也可以自己對項目做擴展，開發自己需要的組件。
應該有的收獲
學完這個課程以后，應該有如下幾方面的收獲：
- 基礎知識。通過學習這個課程，要把里面涉及的知識點都學會。這部分收獲是比較明確的，我在課程的最后也會列出所涉及到的知識點，同學們到時要根據我給的列表查漏補缺，別留下盲區。
- 樣式的開發技巧。項目的開發過程中涉及很多技巧，比如各種居中方式、布局方式、文本截斷方法和定位方法等。這些技巧都是通過多年的實戰經驗總結出來的，這部分收獲應該是這個課程的重點。
- UI 框架的設計思路。能夠以不同角色的角度參與到 UI 框架的設計研發過程，了解整個框架的設計思路。
- 良好的編程習慣。通過規范地開發一套 UI 系統，培養良好的編程習慣，也可以找出之前開發時有哪些不足。
- 提升抽象、提煉、整合的能力。對需求進行抽象，提煉出代碼里有共性的東西，最后整理成通用功能的能力。
課程的介紹就到這里，更精彩的內容都在后面。