CHAPTER 11 · PRACTICE WORKSPACE

CSS 重構、優先權與 DevTools

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

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

FOCUS TASK · TASK-02

現在只處理：修正外溢的選取器範圍

修改：style.css

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

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

specificity vs scope｜不是越強越好

比較：specificity 是競爭規則的權重，scope 是規則應該影響的範圍；先縮小範圍再處理衝突。

現在做：在 Checkpoint 1 的 style.css 暫時停用 #portfolio p，選取 .work-card__text，記錄 Styles 中被劃掉的規則；再加入 .work-card__text { color: var(--color-ink); }，確認 Computed 顏色回到 rgb(23, 32, 29)，不要用 !important。

看預期與證據

預期：完成後能觀察到「卡片說明不再被頁面級規則覆蓋」，並說出specificity 是競爭規則的權重，scope 是規則應該影響的範圍；先縮小範圍再處理衝突。

證據：用前後截圖或口述比較「卡片說明不再被頁面級規則覆蓋」，指出這個小型實驗如何證明specificity 是競爭規則的權重，scope 是規則應該影響的範圍；先縮小範圍再處理衝突。

頁面規則 vs 元件規則｜避免外溢

比較：頁面級 selector 可能覆蓋不相關內容，元件 selector 才能保留局部責任。

現在做：暫時把 #portfolio p { font-weight: 900; } 加到 Checkpoint 1，選取 #proof 與 .work-card__text 比較兩者同時被影響；移除頁面規則，保留 .legacy-note 與 .work-card__text，確認兩個責任各自獨立。

看預期與證據

預期：完成後能觀察到「卡片說明不再被頁面級規則覆蓋」，並說出頁面級 selector 可能覆蓋不相關內容，元件 selector 才能保留局部責任。

證據：用前後截圖或口述比較「卡片說明不再被頁面級規則覆蓋」，指出這個小型實驗如何證明頁面級 selector 可能覆蓋不相關內容，元件 selector 才能保留局部責任。

需要排錯時查看：任務循環（觀察 → 預測 → 實作 → 故障 → 驗收）
  1. A｜觀察：在 Checkpoint 1 確認具名變數已控制間距與品牌色，再選取卡片說明，找出仍跨出元件範圍的頁面級覆蓋規則。
  2. B｜預測：預測 .work-card__text 的 Computed color 會回到 rgb(23, 32, 29)，#proof 仍保有不同的 .legacy-note 顏色。
  3. C｜實作：在 style.css 的 .legacy-note 與 .work-card__text 完成「修正外溢的選取器範圍」，一次只處理本任務責任。
  4. D｜故障：若結果不一致，先依原操作重現，再檢查 .legacy-note 與 .work-card__text 與 style.css，最後重跑原操作。
  5. E｜驗收：卡片說明使用元件級顏色，#portfolio p 不再覆蓋，.legacy-note 仍維持獨立責任

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

CSS REPAIR LAB

作品卡片

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

查看證據

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

第 10 章 → 第 11 章

從互動回饋追到 CSS 的根因

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

CONTINUE

繼續完成 TASK-02

前往 Checkpoint 2，依要求完成「修正外溢的選取器範圍」。

前往 Checkpoint 2：完成 TASK-02