LESSON-08 · TOPIC 03

元件 class 與 utility class

能讓 component class 負責完整卡片外觀，utility class 只增加單一可預測的間距責任。

code-edit首頁 CSS 組裝與 landmarks｜元件 class 與 utility class本頁只練一個責任

本頁只練什麼

能讓 component class 負責完整卡片外觀，utility class 只增加單一可預測的間距責任。

若 utility 重複背景、邊框等元件責任，class 組合會互相覆蓋；分工清楚才能安全重用。

要修改的檔案：files/starter/style.css

定位：先列出 service-card 目前負責的 background、border、padding，再確認 utility 只改 margin。｜依 module-3 定位，只修改「元件 class 與 utility class」的責任。

任務情境

先結果，再原理；完成後要能說出自己看見的證據。

現在的問題

同一張服務卡在首頁需要較大上距，但在列表頁不需要；團隊不想複製第二套卡片 class。

起始狀態：卡片只有 service-card，外觀完整但沒有額外上距。

完成後要看到

runtime class 由 service-card 變 service-card space-stack-lg；背景／邊框仍由 service-card，margin 只由 utility 提供。

驗收證據：runtime before=service-card、after=service-card space-stack-lg、attribute=class；Styles 顯示 margin 與外觀分屬兩條規則

何時會用到

同一卡片元件在不同頁面只需調整一項間距、對齊或顯示輔助時。

常見混淆：utility 不是任意 override；若一個 class 同時改背景、border、padding 與字體，它已不像單一用途 utility。

觀念與最小範例

這段程式是理解起點，不是要你直接跳過 Starter。

元件 class 與 utility class Component and utility classes

component 是完整家具，utility 像只加一個墊高腳；utility 不應重新打造整張椅子。

正式說法：A component class groups cohesive visual/state rules for a reusable UI unit；a utility class exposes one narrow declaration responsibility intended for composition。

.service-card{background:var(--surface);border:1px solid var(--border)}.space-stack-lg{margin-block-start:2rem}

三步完成本主題

每一步都留下可觀察結果；如果沒看到，先看「卡住先查」。

Step 1｜先看見目前缺口，不急著貼答案。
檔案：files/starter/style.css　定位：先列出 service-card 目前負責的 background、border、padding，再確認 utility 只改 margin。
要做：先重新載入 Starter，記錄目前畫面、DOM、Computed、Console 或文件內容。
預期：能指出「先列出 service-card 目前負責的 background、border、padding，再確認 utility 只改 margin。」目前的缺口。
證據：保存 files/starter/style.css 的目前狀態，並指出下一步只會修改哪個檔案責任。
卡住先查：確認開啟的是 files/starter/style.css，且定位到先列出 service-card 目前負責的 background、border、padding，再確認 utility 只改 margin。。
Step 2｜只修改本主題的一個責任。
檔案：files/starter/style.css　定位：先列出 service-card 目前負責的 background、border、padding，再確認 utility 只改 margin。
要做：執行實驗將卡片 class attribute 由 service-card 改為 service-card space-stack-lg，保留元件責任並加入單一 utility。
預期：runtime class 由 service-card 變 service-card space-stack-lg；背景／邊框仍由 service-card，margin 只由 utility 提供。
證據：runtime before=service-card、after=service-card space-stack-lg、attribute=class；Styles 顯示 margin 與外觀分屬兩條規則
卡住先查：先列出 service-card 目前負責的 background、border、padding，再確認 utility 只改 margin。
Step 3｜重新載入並以證據驗收，不以『看起來差不多』判定完成。
檔案：files/starter/style.css　定位：先列出 service-card 目前負責的 background、border、padding，再確認 utility 只改 margin。
要做：重新整理頁面，再逐項比對預期結果與 evidence。
預期：runtime class 由 service-card 變 service-card space-stack-lg；背景／邊框仍由 service-card，margin 只由 utility 提供。
證據：runtime before=service-card、after=service-card space-stack-lg、attribute=class；Styles 顯示 margin 與外觀分屬兩條規則
卡住先查：先列出 service-card 目前負責的 background、border、padding，再確認 utility 只改 margin。

觀察示範

這個示範只讓你看懂概念，不會替你修改 Starter，也不會自動宣告完成。

元件 class 與 utility classruntime fixture · read-only demo

本主題示範畫面：

服務卡片

驗收證據

勾選只是學習紀錄；真正完成仍要回到 Starter 的實際結果。

我能指出 files/starter/style.css 的目前缺口。
我依 Step 2 只修改本主題責任。
我重新載入並保存了這項證據：runtime before=service-card、after=service-card space-stack-lg、attribute=class；Styles 顯示 margin 與外觀分屬兩條規則

提示 1｜方向

不要移除 component class；只附加一個單責任 utility。

提示 2｜關鍵片段

保留 service-card，加入 space-stack-lg。

提示 3｜完整解答與原因

完整解答與原因：component 繼續負責卡片外觀，utility 只提供 2rem 上距；兩者可組合且沒有重複責任。

完成後進入下一階段，或回到入口選下一個 topic。

開始 Starter →回到主題清單