CHAPTER 11 · PRACTICE WORKSPACE

CSS 重構、優先權與 DevTools

整理後、可追查覆蓋來源的作品集 CSS

01 Starter 0/3
  1. 01Starter讀懂作品骨架
  2. 02Checkpoint 1加入第一項能力
  3. 03Checkpoint 2累積第二項能力
  4. 04Solution核對完整結果

TASK STATUS

三項任務目前狀態

TASK-01本階段處理

建立可理解的品牌色與間距變數

修改檔案：style.css

完成後看見：Computed 顯示卡片 padding 24px、按鈕背景 rgb(12, 118, 86)，來源由 --space-card 與 --color-brand 控制

TASK-02稍後處理

修正外溢的選取器範圍

修改檔案：style.css

完成後看見：卡片說明使用元件級顏色，#portfolio p 不再覆蓋，.legacy-note 仍維持獨立責任

TASK-03稍後處理

把按鈕 class 從 work-card__button 改為 work-card__action

修改檔案：index.html、style.css

完成後看見：舊 class 搜尋為 0，新 class 同時保留基本、hover 位移與 focus-visible 輪廓

WORKSPACE

本階段實作區

先確認作品目前能做什麼、還缺什麼，再從 TASK-01 開始修改。

FOCUS TASK · TASK-01

現在只處理：建立可理解的品牌色與間距變數

修改：style.css

完成後：Computed 顯示卡片 padding 24px、按鈕背景 rgb(12, 118, 86)，來源由 --space-card 與 --color-brand 控制

講解時展開：2 個小型比較

變數 vs 硬編碼｜讓值可追查

比較：具名變數讓品牌色與間距能被集中修改，硬編碼則讓同一責任散落。

現在做：在 Starter 開啟 DevTools，先選 .work-card 記錄現行 padding，再選按鈕記錄背景色；於 style.css 把未使用的 --brand、--space 語意化為 --color-brand:#0c7656、--color-ink:#17201d、--space-card:24px，將 .work-card 的 padding 與按鈕 background 改用 var()，重新整理後在 Computed 點開來源並截圖。

看預期與證據

預期：完成後能觀察到「卡片間距與按鈕品牌色由具名變數控制」，並說出具名變數讓品牌色與間距能被集中修改，硬編碼則讓同一責任散落。

證據：用前後截圖或口述比較「卡片間距與按鈕品牌色由具名變數控制」，指出這個小型實驗如何證明具名變數讓品牌色與間距能被集中修改，硬編碼則讓同一責任散落。

Computed 值 vs 原始碼｜結果要追到來源

比較：DevTools 的最終值只能說明結果，還要回到原始規則確認責任來源。

現在做：選 .work-card 與按鈕，從 Computed 的 padding、background-color 回到 Styles，點開 var() 對應的 :root 宣告；只把 --space-card 暫時改成 30px，確認卡片改變、按鈕不變，最後改回 24px。

看預期與證據

預期：完成後能觀察到「卡片間距與按鈕品牌色由具名變數控制」，並說出DevTools 的最終值只能說明結果，還要回到原始規則確認責任來源。

證據：用前後截圖或口述比較「卡片間距與按鈕品牌色由具名變數控制」，指出這個小型實驗如何證明DevTools 的最終值只能說明結果，還要回到原始規則確認責任來源。

需要排錯時查看：任務循環（觀察 → 預測 → 實作 → 故障 → 驗收）
  1. A｜觀察：在 Starter 用 DevTools 記錄卡片間距與按鈕品牌色目前來自哪些硬編碼值，確認 :root 尚無 --space-card 與 --color-brand。
  2. B｜預測：預測 Computed 會顯示 padding 24px 與按鈕背景 rgb(12, 118, 86)，且 Styles 能追到兩個具名變數。
  3. C｜實作：在 style.css 的 :root、.work-card、.work-card__button 完成「把模糊變數改成語意名稱並接上使用處」，一次只處理本任務責任。
  4. D｜故障：若結果不一致，先依原操作重現，再檢查 :root、.work-card、.work-card__button 與 style.css，最後重跑原操作。
  5. E｜驗收：Computed 顯示卡片 padding 24px、按鈕背景 rgb(12, 118, 86)，來源由 --space-card 與 --color-brand 控制

完成條件：DONE-01：Computed 顯示卡片 padding 24px、按鈕背景 rgb(12, 118, 86)，來源由 --space-card 與 --color-brand 控制

CSS REPAIR LAB

作品卡片

這段文字應維持容易閱讀的品牌色。

查看證據

重構只整理規則，不改變內容責任。

第 10 章 → 第 11 章

從互動回饋追到 CSS 的根因

保留第 10 章的 CTA、focus 與 reduced-motion 行為；本章只整理變數、選取器範圍與 class 呼叫方，下一章再把整理後的作品帶到不同寬度。

CONTINUE

開始 TASK-01

前往 Checkpoint 1，依要求完成「建立可理解的品牌色與間距變數」。

前往 Checkpoint 1：完成 TASK-01