今天的首要任務是決定要自己手刻 CSS 還是用 CSS 框架，不管是選擇那一種，網站風格大致會在今天有個雛型，接著再依網站佈局的各個部位進行細部調整。

選擇自己手刻 CSS 或是使用 CSS 框架，往往取決於自己設計上的需求和偏好。不過由於這次設計的佈景主題是要開放給大眾使用，就不單單只是自己覺得做的漂亮就好，可先想想看兩者之間的優缺點。

自己手刻 CSS

優點：

1. 客製化：完全按照需求設計，不受任何框架的限制。
2. 載入速度：因為只有你所需要的 CSS 樣式，所以可以保持檔案體積小，載入速度可能較快。
3. 加速學習：自己手刻能更深入學習和理解 CSS，有助於提高前端技能。

缺點：

1. 時間成本：可能需要更多時間來寫和測試 CSS 語法在網頁上的呈現。
2. 一致性：如果沒有嚴格的規範，例如主色、副色、對比色等等的色碼規範，和字體大小的層次，可能會出現不一致的設計。
3. 維護性：樣式的命名過於簡易，可能會和 WordPress 本身的撞名，造成維護上的問題。

使用 CSS 框架

優點：

1. 快速開發：大多數的 CSS 框架都有現成的組件，可以迅速把網頁上的佈局組裝完畢。
2. 一致性：提供一致的風格和文件指南。
3. 響應式設計：具備響應式網頁設計的要素。
4. 社群支持：流行的框架有社群的使用者交流，一起解決問題。

缺點：

1. 多餘的樣式語法：可能包含你不需要的功能，導致檔案較大。
2. 客製化限制：框架可能難以調整，以符合特定的設計需求。
3. 學習成本：初學者需要花時間學習框架的使用。

另外，筆者的猜想，可能會有框架的使用者，因為佈景主題也使用同樣的框架，了解如何改進自己的網站，而特地採用也說不定哦。

目前流行的框架有：

各有特色及優缺點，不過本系列是探討 WordPress 佈景主題開發，CSS 框架的選擇就不細談囉。最後筆者挑選的是 Tailwind CSS，主要原因是它的社群實在太活潑，網路上很多現成的組件很適合轉換成 WordPress 的區塊使用，因此為了日後提供更多的功能，於是採用 Tailwind CSS 作為 Ironman 佈景主題的 CSS 框架！

安裝 Tailwind CSS

這個章節段落是描述筆者採用 Tailwind CSS 的安裝、設定過程。如果是使用其它的 CSS 框架，且使用 NodeJS 的 NPM 套件管理員來安裝，步驟會是類似。

步驟 1

工作目錄為 theme 的根目錄，以這個例子為：

./wp-content/themes/ironman/

步驟 2

建立 package.json

npm init -y

步驟 3

安裝 Tailwind CSS 和它的平行依賴套件 PostCSS 及 Auto Prefixer。

npm install -D tailwindcss postcss autoprefixer

步驟 4

產生 tailwind.config.js 設定檔。而 -p 參數是告訴 Tailwind CLI 工具，順便產生 postcss.config.js 設定檔。

npx tailwindcss init -p

tailwind.config.js 內容：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

postcss.config.js 內容：

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

步驟 5

盤點要請 Tailwind CLI 工具在打包時要掃描那些目錄裡的檔案。並修改 tailwind.config.js 內容。

content: [
  "./*.php",
  "./classes/*.php",
  "./inc/*.php",
  "./template-parts/**/*.php",
],

以上是目前盤點可能會有 HTML 標籤存在並使用到 CSS 的 PHP 檔案。

它會找出所有在 HTML 中有使用到 class 屬性的地方，並檢查是否為 Tailwind 語法，只把有用到的語法打包起來。也因為如此，Tailwind 產生的 CSS 檔案都是有用到的，不會有沒用到的樣式被包進去，檔案尺寸比起即它框架會小非常多。

入口檔案

建立 assets 目錄，在它之後再建立 sass 目錄，接著開一個新的檔案，命名為 index.scss。放入以下語法來載入 Tailwind CSS：

@tailwind base;
@tailwind components;
@tailwind utilities;

別忘了檔案註解！

要把根目錄下的 style.css 的檔頭註解複製起來，貼進這檔案頭部，不然打包檔案後，頭部資訊被刷掉，WordPress 會找不到這個佈景主題哦！

內容如下：

圖：index.scss 檔案內容

打包檔案

設定打包指令到 package.json 中，以下這一行指令加到 script 段落。

"css": "tailwind build ./assets/sass/index.scss -o ./style.css"

檔案內容如下：

圖：package.json 內容

最後，要把檔案打包，執行指令：

npm run css

就會把放在 assets/sass 目錄下的 SCSS 檔案打包到 style.css 檔案中。

測試打包指令

動圖：測試打包指令

實際操作一次，CSS 樣式語法都被打包到 style.css 中，且檔案頭部的註解資訊還在，這樣就沒問題囉。

總結

這篇文章沒有討論到技術相關的問題，只分享筆者在選擇 CSS 框架的過程。如果不用框架當然也是可以的哦！

其實今天下班，筆者花了一個多小時在挑 CSS 框架，最後還是挑了 Tailwind CSS，主要還是考量到日後如果要提供區塊功能的話，有很多免費酷炫的現成的範本可以直接加入區塊大軍的行列，不過時間有限，不大確定會不會談到這個過程哦。

課後思考：

若你要設計一個全新的網站或佈景主題，你會選擇自行手刻 CSS 還是使用 CSS 框架？請根據你的網站需求和設計目標，論述你的選擇理由。

前篇解答參考：

許多軟體附帶授權協議，例如 GPL、MIT、BSD、Apache 等開源授權。例如，MIT 是相對寬鬆的條款，幾乎沒有限制，但仍需要在軟體內附上原始的版權聲明。WordPress 的軟體是基於 GPL 條款，修改相關作品，必須以 GPL 授權將其原始碼提供給使用者。這確保任何使用、修改 GPL 授權軟體的人都會向社群回饋其修改。因此，修改 GPL 的作品，在網上販賣，也要確保你的原始碼也回饋給社群。例如，在接下來的文章，筆者會介紹如果編寫 README 檔案，裡頭必須詳列所使用的依賴及修改的作品及授權條款，送審的時候，WordPress 的佈景主題審核小組才會通過上架申請。