CSS 框架指南 Tailwind 與 Bootstrap 區分原子化與物件導向設計之開發選型策略

什麼是 CSS 框架？

CSS 框架 (CSS Frameworks) 是預先編寫好的樣式庫，旨在簡化網頁開發流程並確保跨瀏覽器的一致性。它們通常基於特定的設計模式，如 Bootstrap 採用的 OOCSS (物件導向 CSS)，強調元件化與結構分離；或是 Tailwind CSS 採用的 Atomic CSS (原子化 CSS)，強調 Utility-First 以實現極高的開發靈活性。選擇合適的框架能讓開發者專注於業務邏輯，大幅減少重複撰寫基礎樣式的時間，是現代前端開發中維持程式碼品質與加速交付的核心工具。

小編曾介紹過 CSS 的設計模式，本篇將繼續深入，開箱那些年小編曾體驗過的 CSS 框架 主流框架：

• Tailwind CSS
• PureCSS
• Bootstrap
• animate.css

大家在寫 CSS 的過程，應該都會經歷幾個階段，這就好比女孩子剛學化妝：

1. 都不太會寫，先找個大家常用的套件 => 你寫的網站好 Bootstrap。
2. 開始用一些原生的寫法，寫著寫著就變成龐然大物幾千行的程式碼。
3. 開始把 CSS 元件化，將常用的 UI 封裝起來，就是常見的幾套框架像是 Bootstrap、Element UI、Antd 幫我們做的事情。
4. 使用 CSS 處理器優化開發者體驗。
5. CSS 原子化。

就好像女孩子剛學化妝的時候：

1. 先看個網美推薦就開始買個套裝組開始塗，可是工具是否用的好，塗上去是否適合都不知道。
2. 接下來就開始東買一個西買一個來試用，桌上堆滿了琳瑯滿目的化妝跟保養品。
3. 各種產品用過一輪後接著開始知道洗澡前後用什麼、睡前用什麼、起床用什麼、出門用什麼。
4. 開始用一些產品取代掉過去使用的。
5. 只買自己需要的。

Tailwind CSS：Utility-First 的原子化 CSS 框架

可以不改到 Style Sheet 避免把東西改壞但還是可以修改畫面的方法

Tailwind CSS 是一種 Utility-First 的 CSS 框架，它把所有可能會用到的樣式都寫成一個 Class。使用 Tailwind CSS，基本可以不用再寫 CSS 樣式，壞處是 HTML 標籤的 class 會很長。這在 CSS 原子化 的趨勢下，成為許多開發者的首選。

也許有人會說那這包不就很大且一堆功能沒用到? 所以在打包的時候需要使用 purge css。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800">
  <img
    class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto"
    src="/sarah-dayan.jpg"
    alt=""
    width="384"
    height="512"
  />
  <div class="pt-6 md:p-8 text-center md:text-left space-y-4">
    <blockquote>
      <p class="text-lg font-medium">
        “Tailwind CSS is the only framework that I've seen scale on large teams.
        It’s easy to customize, adapts to any design, and the build size is
        tiny.”
      </p>
    </blockquote>
    <figcaption class="font-medium">
      <div class="text-sky-500 dark:text-sky-400">Sarah Dayan</div>
      <div class="text-slate-700 dark:text-slate-500">
        Staff Engineer, Algolia
      </div>
    </figcaption>
  </div>
</figure>

Pure CSS：輕量級模組化 CSS 框架的典範

輕量化、簡單、易用

Pure CSS 是一個輕量級、簡單、易用的 CSS 框架。它分成了 6 種模組，每個模組都是獨立的 CSS 檔案，可以依需求載入需要的模組，不需要太多工具就可以直接使用的一套 CSS 框架。從原始碼可以發現其符合 OOCSS 的設計原則。

1. base
2. Grids
3. Forms
4. Buttons
5. Tables
6. Menus

可以從原始碼發現結構與樣式分離 (OOCSS)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

.pure-button {
  /* Structure */
  display: inline-block;
  line-height: normal;
  white-space: nowrap;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* 樣式 */
.pure-button-primary,
.pure-button-selected,
a.pure-button-primary,
a.pure-button-selected {
  background-color: rgb(0, 120, 231);
  color: #fff;
}

原始碼: https://unpkg.com/purecss@2.1.0/build/buttons.css

Bootstrap：功能全面的前端開發框架

Bootstrap 是另一個廣受歡迎的 前端開發框架。Bootstrap 的樣式很難去客製化一個自己新的樣子，頂多依照開發指南去蓋掉一些變數。如果一個專案，需要快速或者簡單交付，那就不一定要用 Tailwind CSS，用 Bootstrap 真的方便快速。

Bootstrap 也包含 OOCSS 的概念，從以下範例可以看出來什麼是容器與內容分離：

1
2
3
4
5
6
7
8

/* 未分離 */
.col .btn {
  /* 樣式內容 */
}

/* 容器與內容分離 */
.col { /* 樣式內容 */ }
.btn { /* 樣式內容 */ }

1
2
3

<div class="col">
  <button class="btn">button</button>
</div>

Bootstrap 也有常用的一些 CSS 屬性部分做 Atomic CSS (原子化樣式) 的設計：

1
2
3
4
5
6
7
8

.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

.mt-3 {
  margin-top: 1rem !important;
}

animate.css：為網頁增添動畫效果的輕量級選擇

推薦 animate.css，這是一個專注於提供各種預設動畫效果的輕量級 CSS 函式庫。它也提供了 custom build 的功能，主要也是 原子化樣式 (Atomic CSS) 的概念。

主要也是原子化樣式 (Atomic CSS) 的概念，以動畫 delay 秒數為例:

• animate__delay-2s -> 延遲 2s
• animate__delay-5s -> 延遲 5s

1

<div class="animate__animated animate__bounce animate__delay-2s">Example</div>

FAQ：CSS 框架常見問題

Q1：我該如何決定要用 Tailwind CSS 還是 Bootstrap？

A：這取決於您的「客製化需求」。如果您想要完全掌握 UI 的每一個細節，且不希望被預設元件限制，Tailwind CSS 是更好的選擇；但如果您需要快速搭建後台管理系統，且希望有成熟的預設元件（如 Modal, Dropdown）可以直接使用，Bootstrap 會更高效。

Q2：使用 Tailwind CSS 會不會導致網頁載入速度變慢？

A：不會。 雖然開發階段的 CSS 文件很大，但在正式上線打包時，透過 PurgeCSS 機制，Tailwind 會自動移除所有專案中未使用的 class。最終產出的 CSS 檔案通常只有幾 KB，遠比 Bootstrap 或手寫 CSS 更輕量。

Q3：這些框架對 SEO 有影響嗎？

A：間接有影響。 搜尋引擎爬蟲主要看的是 HTML 結構語義。框架本身不影響 SEO，但如果框架能幫您加速開發「響應式網頁 (RWD)」並提升「頁面加載速度 (Core Web Vitals)」，這對 Google 排名是有正面加分的。

掌握了 CSS 框架 的底層邏輯，您就能在不同規模的專案中游刃有餘。不論是選擇極致靈活的原子化方案，還是穩健全面的元件化架構，適合專案目標的才是最好的選擇！

• ← 上一篇
• 下一篇 →