抽出品牌色與間距變數
條件：用 DevTools Styles 查看卡片間距與按鈕背景，確認分別來自 --space-card 與 --color-brand。 驗收：卡片間距與按鈕品牌色由具名變數控制
CHAPTER 11 · 210 MINUTES
CSS 重構、優先權與 DevTools
同一個品牌色與間距散落多處，選取器越寫越長，樣式失效時只會繼續加規則或 !important。
3個明確任務
2個接回點
1份可見成果
LEARNING GOALS
本章結束時，你能做出什麼
縮小會外溢的選取器範圍
條件：用 DevTools 選取卡片說明，確認頁面級選取器不再覆蓋元件規則。 驗收：卡片說明不再被頁面級規則覆蓋
用 Styles 與 Computed 面板提出證據
條件：將兩處改成 work-card__action，刪除舊規則後用滑鼠 hover、Tab 與 DevTools 驗證。 驗收：練習作品的舊 class 搜尋為零，新 class 同時控制基本、hover 與 focus 狀態
進場檢核與作品接力
- 具備第 10 章成果：有目的、可操作且尊重減少動態偏好的互動回饋：不看答案，展示或口述第 10 章成果，並說出一項可見證據。 需要補強時從這裡接回
- 能從 Starter、Checkpoint 與 Solution 中辨識目前工作階段：開啟本章主講義，指出 TASK-01 的修改檔案、可見結果與第一個 Checkpoint。 需要補強時從這裡接回
- 能用「操作後看見什麼」描述驗收證據：閱讀三個任務後，選一題說出操作條件與預期可見結果。 需要補強時從這裡接回
輸入：第 10 章產物：有目的、可操作且尊重減少動態偏好的互動回饋
本章輸出：整理後、可追查覆蓋來源的作品集 CSS
產物類型：mainline；後續用途：第 12 章
PROBLEM & ANALOGY
先理解責任，再寫語法
CSS 變數像工作室的色票與尺寸標籤；DevTools 像驗屋用的探測器，先找到哪條規則生效，再決定要修哪一處。
本章要解決：同一個品牌色與間距散落多處，選取器越寫越長，樣式失效時只會繼續加規則或 !important。
接住上一章：第 10 章已完成有狀態回饋的 CTA。
合回共同作品：本章成果必須回到同一份作品集檢查，不另開一個無關小作品。
把名詞對回畫面與程式
- CSS 變數
- 用具名的 --brand-color 或 --space 保存可重用決策。
- 選取器範圍
- 決定規則會影響哪些元素，過大就會外溢。
- cascade
- 多條規則競爭時的套用順序與優先權。
- Computed
- DevTools 中元素最後真正採用的值。
- class rename
- HTML 與 CSS 必須同步改名，舊名稱要清零。
SCOPE
今天的學習邊界
能自己完成
抽出品牌色與間距變數；縮小會外溢的選取器範圍；用 Styles 與 Computed 面板提出證據。
看得懂即可
能辨識被刪線規則、來源檔案與 computed value。
刻意延後
不教預處理器、CSS-in-JS 或以 !important 當通用修法。
本章術語：CSS 變數、cascade、specificity、computed、scope、DevTools。遇到英文先回到畫面責任，不要求背拼字。
CORE IDEAS
三個核心觀念
- 先確認檔案載入，再確認選取器有沒有選到，最後比較優先權與順序。
- 重構只改責任與重複，不趁機改成另一種設計。
- 變數命名描述用途，例如
--color-brand，不使用--green1。
DEBUG
錯誤觀察與排查順序
課堂刻意錯誤：故意用 #portfolio .card p 覆蓋 .card__text，讓學生在 Styles 看刪線，再把廣泛規則縮到 .legacy-note，不加 !important。
- 變數沒有生效：檢查
var()括號與變數名稱是否完全一致。 - 規則仍被蓋：在 Styles 讀取檔名、行號與刪線，不先提高權重。
- 重構後版面變形：逐一還原非必要屬性，只保留變數與 scope 改動。
固定順序：先重現 → 讀 Console／Styles → 確認檔案與元素 → 一次只修一處 → 重跑原操作。
變數改了但畫面沒變
先查：先查 var() 名稱一致，再看變數宣告範圍。
卡片說明被錯誤套用
先查：在 Computed 追來源，找出外溢的頁面級規則。
改名後按鈕失效
先查：搜尋舊 class，確認 HTML、CSS、hover、focus 都同步。
PRACTICE CONTRACT
Starter 到 Solution 是同一份骨架
開始前先確認這四件事
- 我先搜尋現有重複值與舊 class。
- 我知道哪條規則應縮小範圍。
- 我會用 Computed 找實際生效來源。
- 改名後會重跑主要互動與全文搜尋。
建立可理解的品牌色與間距變數
檔案：style.css
位置：依任務文字搜尋對應元素或函式
結果：卡片間距與按鈕品牌色由具名變數控制
修正外溢的選取器範圍
檔案：style.css
位置：依任務文字搜尋對應元素或函式
結果：卡片說明不再被頁面級規則覆蓋
把按鈕 class 從 work-card__button 改為 work-card__action
檔案：index.html、style.css
位置：依任務文字搜尋對應元素或函式
結果：HTML 與 CSS 只剩新 class，舊名稱為零且 hover、focus 規則集中
EVIDENCE
成果證據與檢核
30 秒說法可以直接照這個句型練習：
我把 ______ 抽成 ______；Computed 顯示來源是 ______；搜尋 ______ 的結果為 0。
重構以行為不變為前提；請保留原本可操作的 hover、focus 與卡片內容。
提交整理前後截圖，以及一張 DevTools Styles 面板截圖，標出哪條規則曾被覆蓋。
30 分鐘真實重構：在共同作品中全域搜尋一組含糊 class，完整更新 HTML 與 CSS 呼叫方，刪除被取代的重複規則；提交舊名稱搜尋為零、DevTools 生效規則與三種寬度回歸證據。
下一章：第 12 章會讓整理後的版面適應不同螢幕寬度。