| 任務 | 完成標記 | 修改檔案 | 修改位置 | 可見結果 |
|---|---|---|---|---|
| TASK-01 | DONE-01 | style.css | .button | 所有按鈕具有一致尺寸、圓角與字重 |
| TASK-02 | DONE-02 | style.css | .button--primary、.button--secondary | 兩種按鈕有清楚的行動層級 |
| TASK-03 | DONE-03 | style.css | .component-card | 作品與服務卡片共用一致邊框及留白 |
hover 與 transition 留到第 10 章，本章 solution 不偷加互動。
任務加厚時的驗收順序
每個 TASK 都依「觀察 → 預測 → 實作 → 故障 → 驗收」進行。答案位置只用來定位 selector，不要整份覆蓋：
- TASK-01：新增只帶
.button的測試按鈕，確認共同基底真的可重用。 - TASK-02：交換 primary／secondary class，再移除變體重複的 padding。
- TASK-03：新增第三張內容不同的卡片，只改一次共同圓角確認同步。
- TASK-04：完成 disabled 或 danger 按鈕變體與兩種卡片變體，說明共用與差異責任。
六個小型實驗與可交證據
- TASK-01｜
.button基底 vs 變體：確認.buttonCSS 規則含display: inline-flex，再比較兩個按鈕的 computed padding、圓角、字重與高度；關閉基底宣告後能說出哪個結果消失。 - TASK-01｜class 組合：暫時把複製按鈕改成只帶
button，比較它與button button--primary的 Computed，並復原元素。 - TASK-02｜primary vs secondary：primary 是 filled、secondary 是 outlined；滑鼠與 Tab 都能辨識兩種用途層級。
- TASK-02｜語意 class 交換：交換 class 後視覺層級翻轉，但文字與
href不變；恢復後兩顆仍可聚焦。 - TASK-03｜卡片外觀 vs 內容：兩張內容不同的卡片 Computed 外觀一致；只改文字不需要改共同 CSS。
- TASK-03｜元件 vs 版面：改
.component-grid只影響排列，改.component-card只影響卡片內部，最後恢復原值。
答案頁只用來定位 selector；所有實驗都必須在復原後再完成一次原任務驗收，不以暫時 DevTools 規則當成作品答案。