昨天我們在 JS 的世界裡與 DOM 奮戰太燒腦了，今天稍微「退一步」，回到 HTML & CSS，專注在元件 (Component) 的設計。

如果說為什麼要做元件？
那想像你在做一個網站：

• 有 10 個頁面都需要按鈕
• 每頁都有卡片展示商品
• 網站頂部一定要有導覽列

如果每次都從頭寫 <button>、重新設定顏色、再一個個調整大小，會瘋掉。
而元件化的設計，就是「做一次，可以重複使用」：

1. 一致性：風格統一，維護簡單
2. 可複用：下一個專案也能直接用
3. 更容易讓 JS 操控：有 class、有結構，JS 就能精準找到它們

基礎按鈕

我們從 HTML 開始：

<button class="btn">送出</button>

有了這個結構，再來加點 CSS：

.btn {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;

.btn:hover {
background-color: #0056b3;
}

------> 一個藍色+ hover 效果的按鈕

多種樣式：主要 / 次要 / 危險

HTML:

<button class="btn btn-primary">主要</button>
<button class="btn btn-secondary">次要</button>
<button class="btn btn-danger">刪除</button>

JS:

.btn-primary { background-color: #007bff; }
.btn-secondary { background-color: #6c757d; }
.btn-danger { background-color: #dc3545; }


.btn-primary:hover { background-color: #0056b3; }
.btn-secondary:hover { background-color: #5a6268; }
.btn-danger:hover { background-color: #c82333; }``

RWD

按鈕在手機上通常需要更大更好點，所以我們可以加上.....

@media (max-width: 600px) {
  .btn {
   width: 100%;
   font-size: 18px;
  }
}

這樣在小螢幕上，按鈕會自動變大，方便使用者點擊

學習心得

今天的重點是「一次設計，多次使用」。有了 class，就能快速改一個地方就影響全部，這個概念不只在 CSS，並且這在未來還能一直用到，這就是元件思維的威力。
而在專案協作中大家使用相同的元件庫，也可以確保程式碼更乾淨也更容易維護!這種做法是從基礎邁向專業前端工程的重要一步~