16個流行的CSS框架以提升前端開發效率

在我那個年代，樣式表就是樣式表。

你需要為每個元素手工編寫 CSS。我們喜歡這種方式。

自原始 HTML 頁面時代以來，CSS 已經有了長足的發展，其中最重要的發展之一就是 CSS 框架的建立和普及。這些工具讓開發人員和設計人員在構建和啟動新專案時，無論專案大小，都變得容易了許多。

它們還對使用者和我們體驗網路的方式產生了巨大影響。框架為網站和網路應用程式的使用者介面和使用者體驗建立了一種共享語言，使幾乎所有網站都更容易理解、瀏覽和使用。

如今，網際網路上每 4 個網站中就有 1 個使用 CSS 框架。

在本文中，我們將探討 16 種最流行的框架，以及從企業到獨立黑客如何使用它們。

什麼是 CSS 框架？

CSS 框架是一個預先準備好的程式碼庫，可幫助實現快速、一致的網站樣式和佈局。框架包括為常用設計元素和元件預先編寫的可重複使用程式碼，可輕鬆應用於基礎 HTML，從而建立熟悉且一致的使用者介面或網站設計。

前端開發人員使用 CSS 框架可快速在網頁和應用程式上部署響應式網格、樣式表單、按鈕或其他重要的使用者介面元素。

使用 CSS 框架的好處

好吧，但為什麼要使用框架呢？

難道你就不能自己構建所有這些東西嗎？當然可以。但這正是問題的關鍵所在。在這個世界上，設計師和開發人員為每個網站或應用程式重複編寫相同的基本 CSS，而框架正是這種情況的必然結果。

為什麼不只寫一次，然後到處使用呢？這就是框架存在的原因。

加快開發時間

人們使用框架的最簡單原因是什麼？速度。框架開箱即帶大量元素和樣式，否則您在開發網站時就需要從頭開始。

那麼，為什麼要重新建立呢？

許多開發人員和網頁設計師還將框架作為一種工具，用於在構建自定義設計系統之前快速構建新網站或應用程式的原型。

一致的風格和設計

使用 CSS 框架的另一個主要好處是，您的所有樣式、使用者介面元素、按鈕等開箱即可保持一致。你無需花費數小時（或數天、數週或數年）來調整單個樣式，以確保它們具有相同的填充、間距和字型大小。

由於框架已經經過精心設計，所有繁瑣的工作都已完成。

還有一個好處是，最流行的 CSS 框架被廣泛使用，有助於網站看起來讓使用者感覺熟悉。從使用者體驗的角度來看，這一點非常重要。

最後但並非最不重要的一點是，要考慮可訪問性。大多數流行的框架都是針對各種裝置和螢幕尺寸而構建的，因此能讓更多使用者使用。

促進響應式設計

實話實說：構建一個完美的響應式佈局是一件痛苦的事。

有太多的變數和因素需要考慮。然後再推斷數以百萬計的裝置，你的完美網格系統很快就會變得一團糟。

現代 CSS 框架再次為你解決了這個問題。它們已經完成了構建畫素完美的響應式設計系統的艱苦工作（和數學計算）。你所要做的就是應用正確的 CSS 類。

提高協作性和可維護性

如果你喜歡維護別人的程式碼、建立文件和解讀別人的註釋，請舉手。

那可不行。

由於大多數框架都附帶有大量的文件庫和使用者社羣，因此你可以從共同的程式碼庫和極其詳盡的文件資訊中獲益，瞭解如何使用該系統。

此外，大多數框架都是開源專案。這意味著你可以自由使用、改編，甚至（在某些情況下）重新發布你自己的版本（如果你喜歡的話）。

CSS 框架的型別

CSS 框架並非放之四海而皆準。它們有不同的形式，每一類都有自己的重點和優勢。瞭解 CSS 框架的分類有助於你瞭解每個框架的預期功能。

現在，讓我們來看看 CSS 框架的主要型別。

基於元件的框架

這是 CSS 框架的起源。基於元件的框架提供了一套預製的使用者介面元件，開發人員可以將其插入應用程式，快速組裝介面。這樣做的目的是提供一個模組化和可重複使用的設計系統，幫助你建立一致且具有視覺吸引力的網路應用程式，而無需每次都從頭開始。

實用優先框架

實用優先框架背後的理念是，CSS 不應該是描述性的，也不應該嚴重依賴於你的標記（例如，表示導航欄或網站頁首的”.header” 類），而應該基於功能（例如，”.text-align-center”）。

實用為先的框架不會將應用程式的設計侷限於框架所提供的內容，而是提供只做一件事（或一小部分事）的 CSS 樣式和類作為構建模組，以擴充套件和定製應用程式的設計，從而超越基於元件的框架的限制。

CSS-in-JS

隨著 React 等 JavaScript 庫的興起，CSS-in-JS 框架應運而生，通過在 JavaScript 標記中包含 CSS，開發人員可以直接在 JavaScript 中操作樣式。

CSS-in-JS 利用 JavaScript 的動態特性，提供了一種根據使用者資料和互動編寫互動式 CSS 樣式的方法，這種方法具有良好的效能。

還有更多型別的 CSS 框架可供選擇，但這三個類別涵蓋了最著名的幾類。

需要注意的是，這些關注點之間並沒有細微的界限。大多數 CSS 框架都可以重疊為多個類別，例如，基於元件的框架可以為你提供實用工具，而基於實用工具的框架也可以為你提供元件。

顯示 CSS 框架某些類別及其相互交織方式的示意圖

例如，上圖展示了 CSS 框架的三個類別如何相互交織。

現代 CSS 框架的主要特點

CSS 框架的範圍相當廣泛，但它們大多具有一些共同的關鍵特性。

預定義的網格系統和佈局

網格讓網路變得…. “圓”？它們讓網頁變成比例完美的方框。這就是它們的作用。

大多數 CSS 框架都有一個內建的網格系統，可幫助建立靈活多變的網站佈局。該系統通常提供大量自定義功能，可輕鬆適應不同的螢幕尺寸、解析度和頁面結構。

響應式媒體查詢

大多數框架開箱即用的另一個功能是媒體查詢，可根據裝置特性自動調整樣式。

從頭開始開發這些系統可能會比較複雜和繁瑣，但它們是現代網路的重要組成部分，可確保內容在不同裝置上正常縮放和顯示。

預置使用者介面元件和模板

大多數 CSS 框架都帶有一個預構建、預風格化的使用者介面元件庫。如按鈕、表單、表格、撥動按鈕等，只需應用一個簡單的類即可使用。

這樣就能更快地構建介面和頁面，而且還能為整個網站（以及整個網路）建立一致的外觀和熟悉的使用者介面奠定基礎。

排版和主題定製選項

這裡分享的許多框架都帶有內建的自定義和主題選項。這樣就可以非常簡單地應用品牌顏色、首選字型和其他個性化修飾，從而改變網站的外觀和感覺，使其與品牌風格相匹配。

16 個流行的 CSS 框架

1. Bootstrap

Bootstrap 最初只是 Twitter 開發人員構建和共享的一個輔助專案。現在，它已成為響應式、移動優先網頁設計中使用最廣泛的 CSS 框架。數百萬人使用 Bootstrap 製作簡潔、一致和熟悉的網頁佈局。

主要功能：

• 響應式網格系統
• 預置 UI 元件
• 可定製、可擴充套件的主題
• 豐富的文件

包括 Twitter（顯而易見）、Spotify 和 Udacity 在內的許多公司都在其網站上部分或全部使用了 Bootstrap 框架。

人們為什麼喜歡 Bootstrap

喜歡 Bootstrap 的理由就是喜歡框架的理由–它簡單、乾淨、易於使用。

有一個龐大的專家社羣，他們擁有使用 Bootstrap 構建網站的豐富經驗，幾乎可以回答您能想象到的任何問題。

而且，雖然 Bootstrap 有時會被冠以 “虛無” 的名聲，但如果您想超越開箱即用的功能，Bootstrap 的自定義功能還是非常強大的。

人們不喜歡 Bootstrap 的地方

到目前為止，對 Bootstrap 最大的質疑就是所有使用它的網站看起來都一樣。

有人會說 “它們太無聊了”。

但這通常只是因為人們使用它的方式千篇一律，而沒有花太多時間去嘗試或定製。

還有一點需要注意的是，該框架整體上比較笨重。對於一個簡單的網站來說，檔案大小可能比你想象的要大。這可能也是 CSS 狀態調查（State of CSS Survey）發現人們對 Bootstrap 的滿意度各佔一半的部分原因。

2. Tailwind CSS

Tailwind 或許既是一個框架，也是一場運動 。

它的建立者亞當-瓦坦（Adam Wathan）寫了一篇關於 Tailwind 背後思想的宣言。從本質上講，他的想法是 CSS 不應該是描述性和語義性的（例如”.header” 類），而應該是功能性的（例如”.center-flex-3″）。

他稱之為 “實用至上的 CSS 框架”。

這種方法似乎對很多人都有效。在 CSS 狀態調查中，Tailwind 的滿意度最高，約為 80%。

主要特點：

• 實用工具類，方便設計樣式
• 響應式設計功能
• 可定製的配置
• 元件友好型方法

許多知名科技公司，如 OpenAI (ChatGPT)、Shopify、Wealthfront 和 Loom，都在使用 Tailwind CSS。

為什麼人們喜歡 Tailwind

由於 Tailwind 以實用為先，因此它擁有幾乎無窮無盡的靈活性。

它並不像 Bootstrap 那樣有預製佈局。取而代之的是，你可以通過組合和分層類，將 HTML 元素放置在幾乎無窮無盡的佈局和 CSS 網格中。

人們喜歡這種方法的主要原因是，他們無需參考文件就能為 div 建立樣式。由於實用工具類的命名非常直觀（大部分情況下），因此無需在 CSS 庫和標記之間不斷切換，就能快速應用樣式。

人們不喜歡 Tailwind 的地方

一言以蔽之： 人們不喜歡改變，對吧？

Tailwind 打破了 CSS 框架，甚至是更廣泛的網路開發中的一些陳舊傳統。

有很多理由可以解釋為什麼這種 CSS 程式碼方法是次優的。關注點分離是 CSS（以及大多數其他程式碼）編寫的基本原則。而 Tailwind 則將這一理念貫徹到底。

Daisy UI

如果你不喜歡 Tailwind 的實用工具框架，還有一個由 Pouya Saadeghi 編寫的名為 Daisy UI 的很棒的庫，它是一個建立在 Tailwind CSS 基礎上的外掛，為你提供了一組感覺更像 Bootstrap 的類。

Daisy UI 為按鈕、卡片、撥動按鈕等常見 UI 元件提供了類名，讓開發人員可以專注於專案中更重要的方面，而不是為基本元素設計樣式。它建立在 Tailwind CSS 的基礎之上，因此一切都可以使用實用工具類進行定製。

使用 Daisy UI 的一個顯著好處是，它大大減少了你需要編寫的類名數量，大約減少了 80%，並能使你的 HTML 大小縮小約 70%。此外，它還為 Tailwind CSS 新增了一組可自定義的顏色名稱，讓開發人員無需新增新的類名就能靈活地建立黑暗模式和其他主題。

3. Bulma

Bulma 是一款基於 Flexbox 的輕量級 CSS 框架。

該框架的語法是純語言的，這意味著它在很大程度上依賴於描述性的實用類或修飾符，如”.button” 和 “.is-large”。

主要功能：

• 基於 Flexbox 的網格系統
• 模組化架構
• 使用 Sass，便於自定義
• 極簡的程式碼和設計

使用 Bulma 的知名網站示例 CSS Ninja 和 Signal。

為什麼人們喜歡 Bulma

Bulma 有點像 CSS 框架中的樂高積木。它非常簡單易懂，非常適合初學者或只想快速解決問題的人。

通過應用一些邏輯命名的類，你可以構建模組、應用CSS 動畫並建立更高階的樣式。它不依賴 JavaScript，因此可以與幾乎所有 JavaScript 框架結合使用。

人們不喜歡 Bulma 的地方

Bulma 的簡單性可能是一把雙刃劍。

作為 CSS 框架的教程或入門工具，Bulma 是一款不錯的工具，但更高階的開發者可能會抱怨它缺乏更強大選項的複雜性或可擴充套件性。

4. Foundation

與 Bulma 相反的是 Foundation。

Foundation 毫不掩飾自己的先進性，因此與其他一些選擇相比相當複雜。它是一個響應式前端框架，專為移動優先開發而設計，可用於網站和電子郵件，全球約有 50 萬個網站在使用它。

主要特點：

• 響應式網格系統
• 全面的使用者介面元件集
• 可定製的 Sass 變數
• 與流行的前端工具和庫整合

為什麼人們喜歡 Foundation

Foundation 是一種 O.G.。

它在千禧年之前就已經存在，這意味著許多開發人員都精通 Foundation，熟悉它的語法和慣例。

它也是一款成熟的產品。它有大量的功能、豐富的文件和資源。

此外，它還被認為是可訪問性最好的框架之一。

人們不喜歡 Foundation 的地方

與大多數成熟的產品一樣，Foundation 與現代的輕量級框架相比會顯得有些笨重 。

它積累了大量需要的功能和自定義選項，這讓程式碼庫和檔案大小變得有點沉重。此外，由於約定俗成的習慣已經改變，對於習慣使用 Tailwind 或 Bootstrap 的初學者來說，學習曲線有點陡峭。

5. Semantic UI

“一切任意的東西都是可變的”。

這就是 Semantic UI 的信條。

該框架的核心是幫助網站和網路應用程式構建和擴充套件熟悉的介面。

主要特點：

• 直觀且人類可讀的類名
• 廣泛的使用者介面元件和佈局
• 可定製的主題和樣式
• 與Angular等流行的JavaScript庫和框架整合

許多網站和公司都在使用語義使用者介面（Semantic UI），其中包括埃森哲（Accenture）和Snapchat。

為什麼人們喜歡 Semantic UI

Semantic UI（語義使用者介面）具有簡單易懂的語法，可以輕鬆地從其大量的使用者介面元件（包括按鈕、模態、卡片、切換、文字欄位等等）中構建出來。

不過，最受歡迎的可能還是主題和定製功能。

Semantic 包含一個主題庫，其中有 3000 多個可自定義的變數，然後在所有使用者介面元件中繼承。

人們不喜歡 Semantic UI 的地方

由於 Semantic 是如此專注於使用者介面，又是如此廣泛，因此它可能包含大量在您的專案中未曾使用過的程式碼。這就意味著，有些人會發現，與包含更多內容的框架相比，Semantic UI 對於更簡單的專案來說過於龐大。

6. Materialize

Materialize CSS 框架基於 Google 的 Material Design 原則。

它強調大膽的視覺設計和注重使用者體驗的動畫（動作）。

Materialize 相當受歡迎，在 GitHub 上擁有 38,000 多顆星。

主要特點：

• 受 Material Design 啟發的元件和樣式
• 響應式網格系統
• Sass 驅動的自定義
• 內建 JavaScript 外掛

Materialize 廣泛應用於各種網站，但其展示的大多數網站都是小型企業和個人專案。

為什麼人們喜歡 Materialize

Materialize 是一款簡單實用的網站解決方案。他們並不提供真正的 “月球”，但這正是人們喜歡它的原因之一。

人們不喜歡 Materialize 的原因

一如既往，簡單也意味著限制。Materialize 不像其他框架那樣健壯或可擴充套件，它的特定動作依賴於 JavaScript。

7. UIkit (UI Kit)

UIkit 是另一種專注於網站和網路應用程式介面的模組化框架，它的流行程度略低於 Semantic UI，但這並不意味著它的功能就不強大。

UIkit 是一個以使用者介面為重點的框架，被許多網站和網路應用程式所採用，其中包括 Crunchyroll、Moqups 和 Rover。

主要特點：

• 具有選擇性匯入功能的模組化架構（超大！）。
• 響應式網格系統
• 用於自定義的 Sass 變數和混合元件
• 豐富的 UI 元件庫

為什麼人們喜歡 UIkit

UIkit 在市場份額上可能稍遜一籌，但它在佔用空間、檔案大小和複雜性方面也更勝一籌。

UIkit 提供了一個極其輕量級的綜合使用者介面元件庫，但並沒有損失太多的功能。它可高度自定義，設定簡單，既可使用提供的構建過程，也可使用自己的構建過程（使用 Less）。

人們不喜歡 UIkit 的地方

UIkit 最大的缺點可能就是它比一些更大、更流行的框架更低調。

但是，你知道，這讓它很酷，對嗎？

說句題外話：UIkit 的使用者社羣規模較小，這可能會增加找到問題答案或特定實現教程的難度。

8. Ant Design

Ant Design 不僅僅是一個 CSS 框架，它還是一個設計系統，其中包含一套高質量的 React 元件，用於構建豐富的互動式使用者介面。

Ant Design 由螞蟻金服集團（阿里巴巴的母公司）開發和釋出，與 Alphabet 和 X（前身為 Google 和 Twitter）等美國科技公司釋出的設計系統類似。

主要特點：

• 全面的使用者介面元件集
• 統一的設計語言和風格
• 可定製的主題和外觀
• 豐富的文件和社羣支援

使用 Ant Design 的知名網站示例（毫不奇怪）： 阿里巴巴

為什麼人們喜歡 Ant Design

Ant Design 為設計師和開發人員提供了極為強大的資源庫。除了 CSS 框架之外，它還有一整套可以直接應用於自己專案的系統（不，是語言）。

這裡有一個龐大的社羣，這個設計系統已經在各個企業和專案中得到了嘗試、測試和驗證，並創造了數十億美元的收入。

可以把它想象成網路專案的特許經營模式。

人們不喜歡 Ant Design 的地方

正如你所猜測的那樣，功能 越多，檔案越大。

整個 Ant Design 系統（未精簡）重約 100MB。

另一個限制是，Ant Design 是專門為 React 專案而設計的。如果您使用的是其他 JavaScript 庫，可能很難調整元件。

9. Primer

作為 GitHub 設計和 UI 元件背後的 CSS 框架，Primer 是開發者以及開發者優先網站和應用程式的超級受歡迎的框架選擇。

它是為特定目的而構建的，任何花時間在軟體倉庫中紮根的人都會對它感到熟悉。

主要特點：

• 選擇性匯入的模組化架構
• 響應式網格系統
• Sass 驅動的自定義
• 內建可訪問性功能

為什麼人們喜歡 Primer

Primer 就像一塊優秀的基礎架構；它低調而簡單，卻能出色地完成工作。此外，知道 GitHub 背後的團隊建立（並維護）了這個庫，對專案的永續性和可靠性也是一大促進。

人們不喜歡 Primer 的地方

正如你可能已經猜到的，GitHub 的設計美學並不適合每一個專案。

因此，人們主要抱怨 Primer 不像其他框架那樣通用，對於不是為開發人員構建的專案或網站來說，Primer 並不是理想的選擇。此外，它的使用者介面元件集也很有限，這在 GitHub 生態系統中是合理的。

10. Tachyons

Tachyons 框架承諾 “快速載入、高度可讀、100% 響應介面”。

Tachyons 使用最少的 CSS，非常適合快速建立主頁、個人作品集或專案網站。

主要特點：

• 帶有實用類的 Atomic CSS 架構
• 響應式設計功能
• 最小化設定和配置
• 檔案小，載入速度快

為什麼人們喜歡 Tachyons

人們喜歡 Tachyons 是因為它是一個快速、簡單的框架。它重量輕、載入快，非常適合小型專案、個人網站和其他簡單的使用案例。

它就像框架中的本田思域（基本款！）。

你知道你會得到什麼。它很好用。而且值得信賴。

人們不喜歡 Tachyons 的地方

將 Tachyons 用於更復雜或視覺效果更復雜的專案需要大量的工作，這意味著它不會是那些只想製作一兩個簡單的網格頁面的人的首選。

11. Pure (Pure CSS)

雅虎！

這個名字你不會經常聽到。(除非你在 “危險” 遊戲中回答關於Google 的替代品的問題，也許是這樣）。

但是，他們的 CSS 框架 Pure CSS 卻在黑客和程式設計師中頗受歡迎。Pure CSS 在 GitHub 上擁有 23k 星級和 2.5k forks，絕對是本列表中最受歡迎的選擇之一。

主要特點：

• 小巧輕便
• 響應式網格
• 基於 Normalize.css 構建
• 開箱即用的表單處理

為什麼人們喜歡 Pure

PureCSS 是最受歡迎的自定義 CSS 或其他框架的附加元件。它超輕量級，提供了許多有用的元件，可以輕鬆連線到現有系統。

這使得在現有堆疊中新增網格、表單、按鈕、表格等功能變得非常簡單。

人們不喜歡 Pure 的地方

Pure 最適合作為外掛而非獨立框架使用。它不像其他解決方案那樣有一個全面的庫，也不提供主題或其他功能，因此只需快速編輯幾下就能輕鬆定製專案的外觀和感覺。

12. Material Design Lite

說到谷歌，除了 Materialize，他們還開源了 Material Design Lite 框架。顧名思義，它是受 Material Design 啟發的框架的一個更輕、更簡單的版本。

它使用了更少的 JavaScript，並且可以在更廣泛的裝置和瀏覽器上使用。

通過訪問 Google Wallet、Google for Work、Google 開發者網站等網站，你可以看到 Material Design Lite (MDL) 的全貌。

主要功能：

• Material Design 理念和 UI 元件
• 開箱即用的大量元件，如按鈕、卡片、滑塊、旋轉器等
• 無外部依賴性
• 編輯選項

為什麼人們喜歡 MDL

MDL 為應用程式、表單等提供了功能超強的元件集。

由於它是根據 Material Design 原則構建的，因此可用性和可訪問性在設計和元件中都處於前沿和中心位置。

人們不喜歡 MDL 的地方

在現階段，MDL 在技術上已經摺舊，因此係統不會獲得任何更新或支援。

除此以外，整個美學設計給人的感覺有點侷限。無論好壞，它給人的感覺很像是為谷歌產品打造的。

13. Spectre.css

Spectre 是另一個快速啟動和執行的不錯選擇。這個輕量級、簡約的框架為你提供了許多從零開始啟動網站所需的構建模組和熟悉的使用者介面元件。

主要特點：

• 檔案小（壓縮後約 10KB）
• 基於 Flexbox 的網格
• 內建實用工具類

為什麼人們喜歡 Spectre

Spectre 是簡潔、極簡、乾淨美觀的理想之選。這裡的重點是純粹的可用性和效率–你不會得到很多額外的鐘聲或口哨聲，但它能完成工作。

人們不喜歡 Spectre 的地方

如果你正在尋找一個擁有高階主題選項、繁榮社羣和大量文件的龐大框架，那麼它可能並不適合你。

Spectre 則更低調一些。它是一款能夠勝任工作的工具，但其受歡迎程度和採用率遠不及 Foundation 或 Bootstrap。

14. Milligram

Milligram 是另一個鮮為人知的框架，它非常 小巧輕便。甚至比我們介紹過的其他小型框架還要小巧輕便。

它是極簡設計的終極選擇，也是快速、直接的專案啟動解決方案。

主要特點：

• 極簡設計
• 非常小（約 2kb gzip）
• Flexbox 網格系統

人們為何喜愛 Milligram

Milligram 可能是最輕、最簡單的 CSS 框架，你可以用它來構建一個開箱即用的專案。它擁有許多其他框架最重要的功能，但佔用空間卻小得驚人。

它的慣例和類也讓它非常容易上手。

人們不喜歡 Milligram 的地方

Milligram 與榜單上其他知名度較低的系統一樣，也存在一些缺點。整體知名度較低意味著社羣支援較少。即便如此，Milligram 的文件與更大型的框架不相上下，而且其簡潔性可能會減少對額外幫助的需求。

15. Water.css

Water 是一個無類的 CSS 系統，你只需將其放入靜態網站即可。它與其他框架的設計方式不同。相反，它能將樣式直接應用到頁面上的 HTML 元素，為你提供一個快速的設計系統，而無需（或無法）構建更復雜的佈局。

主要特點：

• 無類
• 極其輕量級
• 兩種開箱即用的主題：淺色和深色模式。
• 完全響應

為什麼人們喜歡 Water

Water 是快速 CSS 解決方案、樣式模板或簡單模型的絕佳選擇。

它的功能與包裝盒上寫的一樣，是一款超快、省事的解決方案。

人們不喜歡 Water 的原因

對於任何複雜的網站或應用程式專案來說，Water 都是行不通的。它沒有網格，缺少許多大型專案所需的元件，最終以犧牲定製性或可擴充套件性為代價，將簡潔性放在了首位（達到了極致）。

16. Vanilla

Vanilla Framework 或 Vanilla CSS（不要與俗稱的 vanilla CSS 混淆，後者指的是基礎或傳統 CSS）是由 Ubuntu 的母公司 Canonical 建立和使用的一個框架。

主要特點：

• 適用於大型網站專案的可擴充套件架構
• 模組化系統
• 基於 Sass

為什麼人們喜歡 Vanilla

雖然 Vanilla 沒有 Bootstrap 等大型框架那麼受歡迎，但它擁有企業級產品所需的支援、資源、文件，甚至是支援。

在可訪問性方面有非常詳細的分析，在與不同瀏覽器（具體到版本）和螢幕的相容性方面也有細緻入微的說明。

元件和樣式也是簡單而通用的。

人們不喜歡 Vanilla 的地方

對於某些人來說，這個專案可能確實有點 “香草”。也就是說，設計美學在很大程度上是中性和功能性的，沒有太多亮點。

為你的專案選擇最佳 CSS 框架

既然我們已經分享了 16 個超棒的選項，那麼如何選擇正確的選項呢？

和往常一樣，這裡沒有對錯之分，但有一些關鍵問題可以幫助你縮小選擇範圍。

專案要求和目標

瞭解您正在構建的專案型別是最好的開端。如果你正在為一個小專案或個人使用建立一個簡單的網站，那麼可以選擇像 Water 或 Milligram 這樣輕量級的簡單系統。

但如果你需要更強大的系統，你可以選擇 Foundation 或 Bootstrap。

學習曲線和易用性

接下來，考慮系統的複雜性與您或您團隊的能力之間的關係。你是研究新 CSS 框架的專家嗎？或者這是你第一次使用非自制的東西？

瞭解如何使用 CSS 框架本身就需要一些學習。如果你從未使用過框架，最好選擇一個簡單的入門選項。然後，一旦你掌握了元的竅門，就可以深入學習更復雜的系統了。

可定製性和靈活性

您是否需要嚴格遵循現有的品牌或設計準則？

那麼你需要選擇一個內建主題和定製功能的選項，以便輕鬆匹配必要的風格和設計系統。

如果你的適應能力較強，你可以選擇一個風格獨特但缺乏靈活性的系統。

社羣支援和資源

擁有一個使用該框架的社羣可以讓一切變得不同。查詢社羣論壇、Discord 伺服器或 subreddits，看看有多少人在幫助其他使用者，以及每個框架的社羣有多活躍。

效能和檔案大小

請務必考慮您所評估的框架的檔案大小和效能。

網站效能受很多因素（如虛擬主機）的影響，而 CSS 也會對頁面、檔案大小和載入速度產生很大影響。

小結

希望這份 CSS 框架列表能讓你知道下一個專案該從哪裡入手。

無論你是要建立下一個 Facebook，還是要建立一個展示你的搖滾收藏的個人網站，我們都樂於幫助創意者和創業者構建一個美麗的網際網路。