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