大家好，我是Echa。
最近又有老鐵私信我，前面一段時(shí)間分享了幾十款Vue、React、微信小程序開(kāi)源商城項目以及后臺管理開(kāi)源項目等等，有沒(méi)有CSS相關(guān)開(kāi)源框架？羊了還沒(méi)有完全康復，伴著(zhù)咳嗽中上Github上搜索，功夫不負有心人，找到了一些。今天來(lái)分享 GitHub 上一些熱門(mén)的 CSS 框架！
創(chuàng )作不易，喜歡的老鐵們加個(gè)關(guān)注，點(diǎn)個(gè)贊，后面會(huì )持續更新干貨，速速收藏，謝謝！
全文大綱
Bootstrap -是 Twitter 推出的基于HTML、CSS、JavaScript 開(kāi)發(fā)的簡(jiǎn)潔、直觀(guān)、強悍的CSS開(kāi)發(fā)框架Foundation -是一個(gè)用于開(kāi)發(fā)響應式的 HTML, CSS 和 JavaScript 框架。Bulma - 是一個(gè)免費的開(kāi)源CSS框架，它提供了現成的前端組件，可以輕松地組合這些組件來(lái)構建響應式 Web 界面。Bulma 框架最大的特點(diǎn)就是簡(jiǎn)單好用Tailwind - 是一個(gè)功能類(lèi)優(yōu)先的 CSS 框架，它集成了諸如 flex, pt-4, text-center 和 rotate-90 這樣的類(lèi)，它們能直接在HTML中組合起來(lái)，構建出任何設計。UIkit - 是 YOOtheme 團隊開(kāi)發(fā)的一款輕量級、模塊化的前端框架，可快速構建強大的前端界面。Milligram - 提供了最小的樣式設置，以快速和干凈為起點(diǎn)。壓縮后只有 2kb！Pure - 是美國雅虎公司出品的一組輕量級、響應式純CSS模塊，適用于任何Web項目。Tachyons - 指在將CSS規則分解為小型的、可管理的、以及可復用的部件Materialize - 是一個(gè)使用CSS，JavaScript和HTML創(chuàng )建的UI組件庫。
1. Bootstrap
官網(wǎng)地址：https://getbootstrap.com/
GitHub（131k）：https://github.com/twbs/bootstrap
Bootstrap是 Twitter 推出的基于HTML、CSS、JavaScript 開(kāi)發(fā)的簡(jiǎn)潔、直觀(guān)、強悍的CSS開(kāi)發(fā)框架，使得 Web 開(kāi)發(fā)更加快捷。Bootstrap 提供了優(yōu)雅的HTML和CSS規范，它由動(dòng)態(tài)CSS語(yǔ)言L(fǎng)ess寫(xiě)成。Bootstrap 推出后頗受歡迎，一直是GitHub上的熱門(mén)開(kāi)源項目。
Bootstrap 的優(yōu)點(diǎn)：
流行框架：Bootstrap 是最流行的開(kāi)源項目之一。在遇到問(wèn)題時(shí)可以很容易的找到解決方案。功能齊全：它不僅是一個(gè)開(kāi)發(fā)框架，還是一個(gè)預構建的動(dòng)態(tài)模板，包含很多現成的組件。這可以使任何開(kāi)發(fā)人員，即使沒(méi)有前端經(jīng)驗，也可以更輕松地開(kāi)發(fā)結構良好的頁(yè)面。可定制：可以輕松定制 Bootstrap?？梢允褂?npm 安裝項目，導入需要的部分，并使用 CSS 變量自定義幾乎所有內容。成熟且受支持：Bootstrap 最初由 Twitter 退出，現在由數百名開(kāi)發(fā)人員組成的社區維護，確保穩定發(fā)布和長(cháng)期支持。
Bootstrap 的缺點(diǎn)：
難以覆蓋：Bootstrap 具有非常具體的設計和外觀(guān)，如果想要不同的風(fēng)格，就很難覆蓋。由于它廣泛的使用 CSS 中的!important規則，因此可能很難覆蓋默認值。依賴(lài) jQuery：與其他僅支持 CSS 的框架不同，Bootstrap 4 的許多交互功能都依賴(lài)于 jQuery。這使得將它與 React 或 Vue 等 JavaScript 框架一起使用變得更加困難，但也不是不可能。不過(guò)，在 Boostrap 5 中刪除了 jQuery 依賴(lài)項。依賴(lài)繁重：Bootstrap 在項目中非常繁重，盡管可以只導入需要的部分，但它不像其他框架那樣輕量級或模塊化。
2. Foundation
官方地址：https://get.foundation/
GitHub(29.4k)：https://github.com/foundation/foundation-sites
Foundation 是一個(gè)用于開(kāi)發(fā)響應式的 HTML, CSS 和 JavaScript 框架。它是一個(gè)易用、強大而且靈活的框架，用于構建基于任何設備上的 Web 應用，是一個(gè)移動(dòng)優(yōu)先的流行框架。
實(shí)際上，Foundation 不僅僅是一個(gè) CSS 框架，而是一系列前端開(kāi)發(fā)工具。這些工具可以一起使用，也可以完全獨立使用。
Foundation 的優(yōu)點(diǎn)：
通用風(fēng)格：與 Bootstrap 不同，Foundation 沒(méi)有為其組件使用獨特的風(fēng)格。其廣泛的模塊化和靈活的組件具有最小的樣式，并且可以輕松定制。功能齊全：Foundation 提供了很多內置組件。還可以訪(fǎng)問(wèn)由開(kāi)發(fā)團隊或社區創(chuàng )建的預定義的 HTML 模板，可以根據需求去使用這些模板。電子郵件設計：oundation for Emails 可以為任何客戶(hù)端創(chuàng )建響應式電子郵件模板，包括舊版本的 Microsoft Outlook。動(dòng)畫(huà)：Foundation 可以輕松地與 ZURB 的 Motion UI 庫集成，讓我們可以使用內置效果來(lái)創(chuàng )建過(guò)渡和動(dòng)畫(huà)。
Foundation 的缺點(diǎn)：
學(xué)習成本高：Foundation 有很多特性，比其他框架復雜得多。在進(jìn)行前端布局時(shí)，它提供了很大的自由度，所以我們就需要了解這一切是如何工作的。依賴(lài) Javascript：Foundation 的許多功能都依賴(lài)于 Javascript，使用 jQuery 或 Zepto。Zepto 是一個(gè)與 jQuery 使用相同語(yǔ)法但占用空間更小的庫。這使得 Foundation 不太適合 React 或 Angular 項目。Zepto 也是一個(gè)鮮為人知的庫，沒(méi)有多少開(kāi)發(fā)人員熟悉。
3. Bulma
官方地址：https://bulma.io/
GitHub（46.5k）：https://github.com/jgthms/bulma
Bulma 是一個(gè)免費的開(kāi)源CSS框架，它提供了現成的前端組件，可以輕松地組合這些組件來(lái)構建響應式 Web 界面。Bulma 框架最大的特點(diǎn)就是簡(jiǎn)單好用。所有樣式都基于class，只需為 HTML 元素指定class，樣式將立刻生效。
Bulma 的優(yōu)點(diǎn)：
美學(xué)設計：Bulma 它采用簡(jiǎn)潔現代的設計，即使不更改默認設置，最終也會(huì )得到一個(gè)漂亮的網(wǎng)頁(yè)。現代：CSS 的 flexbox 布局使得創(chuàng )建響應式布局變得更加容易，而 Bulma 是最早基于 flexbox 實(shí)現的框架之一。對開(kāi)發(fā)人員友好：Bulma 旨在為開(kāi)發(fā)人員提供出色的體驗?？紤]到這一點(diǎn)，Bulma 提供了易于使用和記憶的命名約定。易于定制：Bulma 的顏色、填充和許多默認屬性都可以使用 SASS 進(jìn)行定制。這樣，可以在幾分鐘內設置項目的默認值。沒(méi)有 Javascript：Bulma 不包含 JavaScript 功能。由于它是純 CSS 的，因此可以輕松地與 Vue 或 React 等 Javascript 框架集成。
Bulma 的缺點(diǎn)：
獨特的風(fēng)格：Bulma的獨特風(fēng)格是一把雙刃劍。由于它非常獨特，如果它被過(guò)度使用，最終會(huì )得到看起來(lái)非常相似的網(wǎng)站，就像 Bootstrap 一樣。不太完整：Bulma 在許多情況下都在與 Boostrap 競爭，但在可訪(fǎng)問(wèn)性和其他企業(yè)級功能方面并不完整。
4. Tailwind
官方網(wǎng)址：https://tailwindcss.com/
GitHub（63.2k）：https://github.com/tailwindlabs/tailwindcss
Tailwind CSS 是一個(gè)功能類(lèi)優(yōu)先的 CSS 框架，它集成了諸如 flex, pt-4, text-center 和 rotate-90 這樣的類(lèi)，它們能直接在HTML中組合起來(lái)，構建出任何設計。
Tailwind 的優(yōu)點(diǎn)：
原子 CSS：Tailwind 通過(guò)提供強大的實(shí)用程序類(lèi)使常見(jiàn)的樣式易于實(shí)現。這種方法有時(shí)被稱(chēng)為原子 CSS，其中 HTML 元素的類(lèi)清楚地描述了它的外觀(guān)。只需使用指定的class，樣式即可生效。沒(méi)有設計：Tailwind 沒(méi)有預制組件或特定的設計語(yǔ)言。所以不必覆蓋現有樣式，在自定義設計時(shí)可以提高工作效率。可重用組件：Tailwind 允許創(chuàng )建自己的自定義組件，可以在整個(gè)項目中重用這些組件，還可以在官網(wǎng)上找到一些組件示例。強大的 PostCSS/SASS 集成：要充分利用 Tailwind，需要安裝并將其導入 SASS 或 PostCSS 項目。這使可以利用 Tailwind 的所有功能來(lái)編寫(xiě)更有效的 CSS。
Tailwind 的缺點(diǎn)：
學(xué)習成本高：對于經(jīng)驗不足的開(kāi)發(fā)人員來(lái)說(shuō)，Tailwind 并不是最佳選擇。由于它不提供預制組件，因此需要充分了解前端技術(shù)的工作原理。Tailwind 的學(xué)習成本較高，必須學(xué)習相關(guān)語(yǔ)法才能使用該框架高效工作。不能直接使用：Tailwind 可以作為捆綁的 CSS 文件添加到項目中。但如果這樣添加框架，它的許多功能將不可用，并且將無(wú)法使用壓縮版本（壓縮版 27 KB、原始版 348 KB ）。要充分利用 Tailwind，需要知道如何使用 Webpack、Gulp 或其他前端構建工具。
5. UIkit
官方地址：http://getuikit.com/
GitHub（17.7k）：https://github.com/uikit/uikit
UIkit 是 YOOtheme 團隊開(kāi)發(fā)的一款輕量級、模塊化的前端框架，可快速構建強大的前端界面。UIKit提供了全面的HTML、CSS、JavaScript組件。它基于LESS開(kāi)發(fā)，代碼結構清晰簡(jiǎn)單，易于擴展和維護，并且具有體積小、反應靈敏的響應式組件，可以根據 UIKit 基本的風(fēng)格樣式，輕松地自定義創(chuàng )建出自己喜歡的主題樣式。
UIkit 的優(yōu)點(diǎn)：
數十個(gè)組件：UIKit 通過(guò)數十個(gè)組件，可以實(shí)現復雜的前端布局。它包括所有典型的實(shí)用程序和組件，并且可以訪(fǎng)問(wèn)高級元素，如導航欄、畫(huà)布外邊欄和視差設計等。可擴展：UIKit 可以使用 LESS 或 SASS 預處理器輕松定制和擴展。基于 UI 的定制器：UIKit 提供了一個(gè)基于 Web 的定制器，可以實(shí)時(shí)定制設計，然后將 SASS 或 LESS 變量復制到項目中。
UIkit 的缺點(diǎn)：
不適合小型項目：不建議經(jīng)驗不足的開(kāi)發(fā)人員使用 UIKit，因為它是一個(gè)復雜的框架，需要深入了解。它非常適合高級應用程序，但對于小型項目可能太復雜了。社區較?。?/strong>它不像其他框架那樣受歡迎，遇到問(wèn)題可能較難找到答案。
6. Milligram
官網(wǎng)網(wǎng)址：https://milligram.io/
GitHub（9.9k）：https://github.com/milligram/milligram
Milligram 提供了最小的樣式設置，以快速和干凈為起點(diǎn)。壓縮后只有 2kb！它為更好的性能和更高的生產(chǎn)力而設計，需要重置的屬性更少，代碼更簡(jiǎn)潔。
Milligram 的優(yōu)點(diǎn)：
極簡(jiǎn) CSS 框架：Milligram 易于設置和上手。盡管它提供了強大的功能來(lái)提高生產(chǎn)力，但它在壓縮后僅有 2 KB。無(wú)默認樣式：與其他框架不同，Milligram 沒(méi)有默認樣式。在實(shí)現自定義樣式時(shí)，無(wú)需重置或覆蓋不符合目標的屬性。易于學(xué)習：上手非常簡(jiǎn)單，閱讀官方文檔足以入門(mén)。
Milligram 的缺點(diǎn)：
無(wú)模板：Milligram 沒(méi)有提供預制的模板。社區較?。?/strong>Milligram 有一個(gè)小而緊密的社區。尋找社區的支持并不像使用更流行的 CSS 框架那么容易。
7. Pure
官網(wǎng)地址：http://purecss.io/
GitHub(22.7k)：https://github.com/pure-css/pure
Pure.css是美國雅虎公司出品的一組輕量級、響應式純CSS模塊，適用于任何Web項目。這個(gè)框架非常小，在使用所有模塊時(shí)壓縮后只有 3.7 KB。
Pure 的優(yōu)點(diǎn)：
輕量：每一行 CSS 都經(jīng)過(guò)仔細考慮和編寫(xiě)，以使框架輕量級和高性能。可定制：可以以模塊化方式導入 Pure 并僅實(shí)現需要的內容。支持良好：與社區項目不同，Pure 得到 Yahoo 的支持，這使得該項目成為長(cháng)期使用的安全選擇。現成的組件：Pure 帶有響應式和為現代網(wǎng)絡(luò )構建的預制組件。
Pure 的缺點(diǎn)：
不適用于小團隊：Pure 不適合經(jīng)驗不足或者小型的團隊，因為需要創(chuàng )建自己的設計來(lái)使用該框架。
8. Tachyons
官方網(wǎng)址：https://tachyons.io/
GitHub（11.3k）：https://github.com/tachyons-css/tachyons
Tachyons與其他流行的前端框架不同，Tachyons旨在將CSS規則分解為小型的、可管理的、以及可復用的部件。Tachyons可以幫助開(kāi)發(fā)人員創(chuàng )建出具有高度可讀性、能夠快速加載和響應的網(wǎng)站，而且無(wú)需使用大量CSS代碼。
Tachyons 的優(yōu)點(diǎn)：
即用型組件：盡管 Tachyons 專(zhuān)注于提供出色的實(shí)用程序類(lèi)以提高生產(chǎn)力，但官方文檔也包含許多即用型組件。多樣化：Tachyons 提供可用于不同設置的功能模板，例如靜態(tài) HTML、Rails、React、Angular 等。可重復使用：Tachyon 是創(chuàng )建可擴展設計系統的絕佳選擇。該框架允許創(chuàng )建可重用的屬性來(lái)構建多樣化和靈活的組件。
Tachyons 的缺點(diǎn)：
主要用于 PostCSS：PostCSS 是使用 Tachyons 的主要方式，但不像 LESS 或 SASS 那樣廣泛使用。Tachyons 確實(shí)提供了 SASS 的集成，但它并未得到廣泛使用和支持。
9. Materialize
官方地址：https://materializecss.com/
GitHub（38.7k）：https://github.com/Dogfalo/materialize
Materialize是一個(gè)使用CSS，JavaScript和HTML創(chuàng )建的UI組件庫。實(shí)現UI組件有助于構建有吸引力，一致和功能的網(wǎng)頁(yè)和網(wǎng)絡(luò )應用程序，同時(shí)堅持現代網(wǎng)絡(luò )設計原則，如瀏覽器可移植性，設備獨立性和優(yōu)雅的降級。它有助于創(chuàng )建更快，更美觀(guān)，更靈敏的網(wǎng)站。它的靈感來(lái)自Google Material Design。
Materialize 的優(yōu)點(diǎn)：
功能齊全：Materialize CSS 提供了很多預制組件，還帶有更高級的 Javascript 功能來(lái)支持交互。移動(dòng)友好：可以使用框架的類(lèi)似移動(dòng)設備的組件（例如浮動(dòng)導航欄和滑動(dòng)交互）創(chuàng )建漸進(jìn)式 Web 應用程序。
Materialize 的缺點(diǎn)：
嚴格的設計語(yǔ)言：如果想做一些不接近材料設計的事情，最好避免使用 Materialise。獨立項目：Materialise 有一個(gè)活躍的社區，但它是一個(gè)小型且獨立的項目，沒(méi)有企業(yè)支持。
10. 總結
這些 CSS 框架在一定程度上有助于提高工作效率。那該如何選擇這些框架呢？
想要更多的功能以及預制的組件，選擇 Bootstrap、Bulma、Materialize；想要只提供實(shí)用程序類(lèi)而不提供樣式的框架，選擇 Tailwind、Milligram、Pure；想要高水平社區支持的框架，選擇 Bootstrap、Foundation；想要更輕量的框架，選擇 Tailwind、Milligram。
最后，還是要根據實(shí)際需求來(lái)選擇最合適的CSS框架！