CHAPTER 11 · PRACTICE WORKSPACE

CSS 重構、優先權與 DevTools

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

03 Checkpoint 2 2/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-02；先核對可見結果，再前往 TASK-03。

FOCUS TASK · TASK-03

現在只處理：把按鈕 class 從 work-card__button 改為 work-card__action

修改：index.html、style.css

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

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

class rename｜定義與呼叫方一起改

比較：重新命名不能只改 CSS 或 HTML 一側，所有呼叫方都要同步，舊名稱搜尋應歸零。

現在做：在 Checkpoint 2 使用編輯器 Find All 搜尋 work-card__button，確認 HTML 與 style.css 各 1 處；同步改成 work-card__action，重新搜尋舊名稱為 0，重新整理後選取新按鈕。

看預期與證據

預期：完成後能觀察到「HTML 與 CSS 只剩新 class，舊名稱為零且 hover、focus 規則集中」，並說出重新命名不能只改 CSS 或 HTML 一側，所有呼叫方都要同步，舊名稱搜尋應歸零。

證據：用前後截圖或口述比較「HTML 與 CSS 只剩新 class，舊名稱為零且 hover、focus 規則集中」，指出這個小型實驗如何證明重新命名不能只改 CSS 或 HTML 一側，所有呼叫方都要同步，舊名稱搜尋應歸零。

hover／focus 規則｜狀態也要集中

比較：重構後基本、hover、focus 狀態仍應由同一個新元件責任管理。

現在做：在 style.css 為 .work-card__action 加上 :hover { transform: translateY(-2px); } 與 :focus-visible { outline: 3px solid #f5c851; outline-offset: 3px; }；用滑鼠 hover、按 Tab focus，再於 DevTools 確認基本、hover、focus 三條規則都集中在新 class。

看預期與證據

預期：完成後能觀察到「HTML 與 CSS 只剩新 class，舊名稱為零且 hover、focus 規則集中」，並說出重構後基本、hover、focus 狀態仍應由同一個新元件責任管理。

證據：用前後截圖或口述比較「HTML 與 CSS 只剩新 class，舊名稱為零且 hover、focus 規則集中」，指出這個小型實驗如何證明重構後基本、hover、focus 狀態仍應由同一個新元件責任管理。

需要排錯時查看：任務循環（觀察 → 預測 → 實作 → 故障 → 驗收）
  1. A｜觀察：先全域搜尋 work-card__button，記錄 HTML 與 CSS 兩個呼叫方。
  2. B｜預測：預測 HTML 與 style.css 的 work-card__button 搜尋皆為 0，hover 會位移，Tab focus 會出現可見 outline。
  3. C｜實作：在 index.html、style.css 的 按鈕 class 與狀態規則 完成「把按鈕 class 從 work-card__button 改為 work-card__action」，一次只處理本任務責任。
  4. D｜故障：若結果不一致，先依原操作重現，再檢查 按鈕 class 與狀態規則 與 index.html、style.css，最後重跑原操作。
  5. E｜驗收：舊 class 搜尋為 0，新 class 同時保留基本、hover 位移與 focus-visible 輪廓

完成條件：DONE-03：舊 class 搜尋為 0，新 class 同時保留基本、hover 位移與 focus-visible 輪廓

CSS REPAIR LAB

作品卡片

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

查看證據

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

第 10 章 → 第 11 章

從互動回饋追到 CSS 的根因

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

CONTINUE

繼續完成 TASK-03

前往 Solution，依要求完成「把按鈕 class 從 work-card__button 改為 work-card__action」。

前往 Solution：完成 TASK-03