找出共同規則
把所有按鈕都需要的尺寸、圓角和字重集中到基底。
CHAPTER 09 · 180 MINUTES
不要每次重做，讓樣式像積木一樣重複使用
把散落的按鈕與卡片規則收成共同基底，再用最小變體表達主要和次要用途。
3個明確任務
2個接回點
1組元件樣式
LEARNING GOALS
本章結束時，你能做出什麼
建立用途變體
主要與次要按鈕只保留造成層級差異的規則。
統一卡片語言
服務與作品內容不同，仍共享邊框和留白。
進場檢核與作品接力
- 具備第 08 章成果：完成卡片標籤與固定返回按鈕：不看答案，展示或口述第 08 章成果，並說出一項可見證據。 需要補強時從這裡接回
- 能從 Starter、Checkpoint 與 Solution 中辨識目前工作階段：開啟本章主講義，指出 TASK-01 的修改檔案、可見結果與第一個 Checkpoint。 需要補強時從這裡接回
- 能用「操作後看見什麼」描述驗收證據：閱讀三個任務後，選一題說出操作條件與預期可見結果。 需要補強時從這裡接回
輸入：第 08 章產物：完成卡片標籤與固定返回按鈕
本章輸出：完成可重複套用的按鈕與卡片樣式組
產物類型：mainline；後續用途：第 10 章
PROBLEM & ANALOGY
按鈕都能點，為什麼全站看起來像不同人做的？
樂高積木有共同接點，再用顏色與形狀組合用途；基底 class 是共同底座，modifier 是接在底座上的用途變體。
本章要解決：同類按鈕高度、圓角與字重不一致，改一個共通值卻要修改很多份重複 CSS。
接住上一章：卡片與返回按鈕的位置已完成，這次只整理其外觀規則，不改定位。
把名詞對回畫面與程式
- 基底 class
- 放共同責任的底座，例如 .button。
- 變體 class
- 只補主要、次要等用途差異。
- HTML class
- 決定元素拿到哪些樣式積木，漏一個就不完整。
- 共同規則
- 所有使用者都應同步得到的尺寸、留白與外觀。
- DevTools
- 用來確認規則是否共用、被覆蓋或重複。
SCOPE
今天的學習邊界
能自己完成
基底 class、變體 class、共同責任與樣式重用。
看得懂即可
元件是可重複的結構與樣式約定，不等於使用框架。
刻意延後
hover、transition 留到第 10 章；本章不建立完整 Design System。
CORE IDEAS
三個核心觀念
-
.button放所有按鈕穩定共享的責任，變體只補用途差異。 - HTML 要同時帶基底與變體 class，才會得到完整外觀。
- 證明可重用的方法是改一處基底，所有使用者都同步改變。
DEBUG
錯誤觀察與排查順序
課堂刻意錯誤：讓第二顆按鈕漏掉基底 class，再讓兩個變體各重複一份 padding，觀察顏色正確但尺寸不一致。
- 確認 HTML 同時帶基底與正確變體 class。
- 在 DevTools 看共同規則是否載入。
- 檢查變體只覆蓋用途差異。
- 尋找重複宣告與命名衝突，最後比較所有使用者是否一致。
按鈕尺寸忽大忽小
先查：先查 HTML 是否同時帶 .button 與正確變體 class。
顏色對了但留白不同
先查：檢查變體是否重複基底 padding，而不是只覆蓋顏色。
卡片仍各做各的
先查：搜尋重複規則，確認作品與服務卡片使用共同 class。
PRACTICE CONTRACT
Starter 到 Solution 是同一份骨架
開始前先確認這四件事
- 我先列出所有使用者共享的責任。
- 我知道基底與變體要同時出現在 HTML。
- 我不把 hover 或動畫提前混進本章。
- 我會改一處基底，觀察所有使用者是否同步。
建立按鈕共用基底
檔案：style.css
位置：.button
結果：所有按鈕具有一致尺寸、圓角與字重
建立主要與次要按鈕變體
檔案：style.css
位置：.button--primary、.button--secondary
結果：兩種按鈕有清楚的行動層級
建立卡片共用外觀
檔案：style.css
位置：.component-card
結果：作品與服務卡片共用一致邊框及留白
EVIDENCE
成果證據與檢核
30 秒說法可以直接照這個句型練習：
共同責任放在 ______；用途差異放在 ______；我改動 ______ 後，所有 ______ 都同步變化。
元件重用先靠清楚的 class 約定，不需要安裝框架或建立完整 Design System。
截圖兩種按鈕與兩類卡片，再只改一次基底圓角，證明所有使用者同步更新。
下一章：在這組元件上加入 hover、focus、transition 與減少動態偏好。