什么要使用框架：

軟件系統發展到今天已經很復雜了，特別是服務器端軟件，涉及到的知識，內容，非常廣泛。這樣開發出完善健壯的軟件，對程序員的要求將會非常高。如果采用成熟，穩健的框架，那么一些基礎的通用工作，比如，事物處理，安全性，數據流控制等都可以交給框架處理，那么程序員只需要集中精力完成系統的業務邏輯設計，可以降低開發難度。

什么是CSS框架：

CSS 框架是一系列 CSS 文件的集合體，包含了基本的元素重置，頁面排版、網格布局、 表單樣式、通用規則等代碼塊,用于簡化web 前端開發的工作，提高工作效率。

其實有些朋友在做項目的時候，首先會選擇采用原始方法寫CSS。 在項目之中最讓人頭疼的就是類的命名，大多數人會根據功能去命名，這就造成了很多的冗余，相同的組件可能寫很多次。簡單舉一個例子，如下圖，個人中心的登錄界面。

很多人包括我剛開始的時候可能會選擇下面的類命名及布局方式，其通用性非常差

然而了解 Bootstrap 的人應該一眼就發現上圖就是一個 media 對象，無非一些小細節需要調整一下

為了讓文字與圖片居中對齊，我們可以使用 Bootstrap 的 .media-middle 的輔助類。如果在工作中還要根據需求自定義一些輔助類調整細節，當然這是一個移動端的例子，可以選擇移動端框架相關的 media 對象。

另外，在項目改版的時候，原始的方法的修改更是慘不忍睹，可以說是噩夢，冗長的 CSS 文件、混亂的功能劃分、類名、色值等等。最后也只能硬著頭皮一點一點修改。那一刻才體會到框架的意義以及前端工具的重要性。從工作中總結出，要么你可以熟練的使用某一個框架，要么就自己實現一個框架。

前端框架對比

目前市面上前端框架主要分重量級與輕量級。重量級主要有 Bootstrap、Semantic、UIkit、Foundation 等，輕量級有 Pure、Skeleton、Miligram 等。經常關注前端動態的工程師會發現輕量級框架每年都層出不窮。在上面提到的主流輕量級框架之外還有很多類似的框架。我一直問自己，為什么要重復造輪子。經過研究，我發現這些輕量級框架其實大多都不能勝任工作需求，而且模仿的痕跡很重，基本上都或多或少的有 Bootstrap 的影子。那么這些輕量級框架有沒有意義呢？當然有。但是就我個人觀點，選擇輕量級框架反倒不如自己實現一個框架。因為大多輕量級框架就像是工作總結，是根據自己的業務需求實現的。所以大多不具有通用性。

前端框架的對比主要以 Bootstrap、Semantic、UIkit 為主，因為我個人感覺這三個最具有代表性，而且設計風格各有特色。Foundation 也有很多大公司在用，但以我個人觀點，無論是框架的易用性還是設計風格，相比其它幾個框架稍遜一籌。

其中 Bootstrap 和 Semantic 是面向對象的最好體現。

我先說一下 Bootstrap 的優勢，不是設計風格，不是模塊，不是特效，而是柵格，響應式柵格。Bootstrap 的柵格在與其它框架對比中占有絕對優勢，無論是柵格的劃分還是類名的風格都堪稱經典。如果讀者有心看一下 Bootstrap 的 Less 源文件，就會感受到 Bootstrap 對于響應式柵格的獨具匠心。其實在 Bootstrap 之前也有很多柵格方案，但是給人的感覺就是不夠利索，類名繁瑣不好記。而后來的很多框架，尤其輕量級的框架大多都有 Bootstrap 的影子。

下面我們通過對比幾個框架的柵格和按鈕來看一下類命名的策略。

Bootstrap

Semantic

FFoundation

UIkit

• Pure

通過上面的對比，大家應該已經發現了這些框架的命名策略的不同。不可否認，Bootstrap 的命名最經典。

之前在網上看到有人討論關于框架的易用性，有人說 Bootstrap 的類名太長，然而通過上面幾個框架的對比，Bootstrap 的類并不繁瑣，而且用預處理器編寫框架時嵌套會比較靈活。

Semantic 的類名最簡潔，通過多個定語的修飾組成一句話，確實很有意思。但是過多的修飾類在編寫框架時會稍顯凌亂，有利有弊，因人而異吧。

Foundation 的柵格應該是最豐富的，策略上類似 Bootstrap，只是對公共屬性進行了拆分，大家也可以看看其中的具體細節。

UIkit 和 Pure 的策略相同，都加了前綴以區分其他框架，但是很顯然類名過于冗長了。我在編寫框架時也這樣想過，但是最終放棄了這種方式。

關于 CSS 預處理器

CSS 預處理器早已不是什么新鮮事，但是真正能夠在工作中運用的人有多少呢？熟練使用預處理器特性的人又有多少呢？

我之前工作的時候也沒有用預處理器，因為不用，所以也意識不到預處理器的好處。主要是覺得麻煩，因為要使用編譯器編譯一下，還不如直接寫 CSS 方便。但是在項目維護的時候就意識到預處理器的好處。后來在幾個項目中嘗試了預處理器，但是對于模塊化的寫法不太明確。預處理器作為工具，可以實現模塊化編寫 CSS，那么應該如何劃分模塊？另外，預處理器有很多特性，但是大多數人剛開始只用到變量和嵌套，其它的特性幾乎很少用到。我相信在自己動手實現一個輕量級框架的過程中，我們可以對預處理器有一個全面的了解。

目前流行的預處理器有 Less，Sass，Stylus 三個，選擇哪個完全是看自己的習慣。我最開始因為 Bootstrap 了解的 Less，但是因為習慣選擇了 Sass，其次 Sass 的功能要更全面一些。

無論是工作還是自己寫項目，都要搭建一個項目環境，也就是安裝一系列的 npm 包。相比刀耕火種的開發方式，使用工具開發的前期準備過程稍顯麻煩，然而一旦環境建好，后期的開發將會游刃有余。

Miligram 這個輕量級框架在 Github 上有很高人氣，但是說實話，用處并不大。不過這個框架的構建方式非常值得學習。雖然 CSS 對于很多人來說很簡單，但是真要去寫一個框架，還是非常棘手，這時候就需要借鑒一些優秀的框架。

編寫框架大致會用到的 npm 如下：

其實最主要的就是一個 node-sass，其它的都是輔助 CSS 文件的生成修改，大家感興趣的話可以去 npm 官網搜索這些插件，了解具體用法，如有不懂可以給我留言，我就不啰嗦了。

編寫輕量級框架

終于到了本篇文章的重頭戲。

大多數的輕量級框架只是 CSS 框架，不涉及 JS 部分，主要用于網頁的布局。我之所以打算自己編寫框架，是因為工作中重復的東西太多，通過框架可以很好的將這些零散組件整合到一起。另一方面，寫個小項目，學點新知識是一件趣事。

• 模塊劃分

編寫框架的第一步就是要確定框架應該包含哪些模塊。因為是輕量級框架，所以模塊肯定沒有重量級框架那么全面，只有核心的一些組件。通過比較一些輕量級框架以及工作總結，大致常用的模塊包括柵格、媒體、按鈕、排版、表單、表格、面板以及輔助工具。

在常用的這幾個組件中，需要重點關注的是柵格、表單及面板，媒體組件也很重要，但是自由發揮的空間不大，我直接用了 Bootstrap 的媒體組件。

• 命名策略

首先是類命名的層次與結構。類命名一直是我比較糾結的地方，剛開始工作的時候為了起一個見名知意又簡潔的類名總是抓耳撓腮。我在編寫框架時盡量避免與 Bootstrap 的類名重疊，但也不能完全避免。對比其他框架會發現，這種情況不可避免的會出現，畢竟類名會有一定的規律性以及層次性。在這一點上我比較喜歡 Bootstrap 的風格。下面和 Bootstrap 的表單做一個對比。

Bootstrap 的表單結構及類名

--div.form-horizontal

--div.form-group

--label.control-label

--input.form-control

Snack 的表單結構及類名

--div.form-row

--div.form-item

--label.form-label

--input.form-field

這個表單結構整體而言還算不錯，只是個別地方需要修改。有一些框架不給 input 等元素起類名，而是給父元素一個類名，個人對這種做法表示疑問，不起類名會降低框架編寫及使用的靈活性。

第二個策略是組件的修飾，比如按鈕及面板都存在多個語境（顏色、大小等），在這一點上我編寫框架時做了一些簡化，風格上有些 Semantic 的影子。

關于修飾類的策略是一個仁者見仁智者見智的問題，至于哪種方法更好，還需要在編寫框架的過程中摸索。

• 柵格系統

任何框架必須建立在柵格的基礎上才能靈活布局。我在前面提到了 Bootstrap 的精華就是柵格系統。柵格系統的編寫需要使用預處理器的循環功能，否則就要做無謂的重復勞動了。

柵格的使用和 Bootstrap 是一樣的，除了 12 列柵格外，10 列柵格以及均分柵格都要添加 .cols- 類

這個柵格并沒有響應式，只有一個斷點，小屏手機上的話所有柵格都會單行顯示。一方面，這樣的設計符合大多數輕量級框架的初衷；另一方面，我打算再寫一個針對移動端的框架，畢竟 Web 端和移動端的風格差距較大，按照業務需求分開會更好。不過最近我更改了源文件，為響應式預留了擴展方式。

• 表單

在上面的命名策略中已經展示了 Snack 表單的基本結構，基本表單除了結構之外，樣式上并沒有太多可以討論的地方。在此說一下表單中 checkbox 的結構調整，先看一下 Bootstrap 的 checkbox 結構。

以上兩種結構不能有偏差，稍有偏差樣式就會錯亂，靈活性較差。其次我在想兩種結構能不能整合在一起，增強靈活性。想了很久，找到了方法，Snack 結構如下：

也可以將樣式直接加到 label 標簽上。另外，如果將 input 移到 label 標簽外也是沒有問題的，如下：

這種結構有一個好處，就是可以自定義

這種結構有一個好處，就是可以自定義 input 樣式，詳見下面的 CodePen 的 scss 文件。radio 的設置和 checkBox 是一樣的。

• 輔助類

輔助類是一系列類的組合，比如字號大小、顏色值、padding、margin 以及左右浮動等。在一些 Bootstrap 搭建的后臺管理系統中尤為常見，這樣布局起來就會比較靈活。以下是一個邊框的輔助類。

對編程感興趣，想了解更多的編程知識，關注頭條號一起玩轉編程

更多編程資訊、干貨持續更新中~