# 第八堂 實戰總複習

本頁連結：http://hackmd.io/XDUocc-2Tz6m8yi97IXudA

* 記得錄影
* 獎品截止日 [說明](https://hackmd.io/51ijGrBfRyWWHWciVmKNRQ)

### 課程獎勵說明

- 50%：**8/4** 前超過 100 人挑戰成功，全班直播加碼一年（**～2027/8/30**）
- 60%：菁英班 DLC 切版影音課程
- 80%：菁英班直播一場（8/29） - 【原子化設計】Tailwind 使用教學（v4 +）
- 90%：抽 711 拿鐵 10 份
- 100%：切版直播班學霸獎狀

任務繳交期限：8/24(日) 23:59:59

更多說明可參考：https://hackmd.io/51ijGrBfRyWWHWciVmKNRQ

### 同學之間的分享會

[同學們的分享會](https://hackmd.io/KxDPrWN5QhydzU6QCmw-3A)

> 最後領獎品的機會喔～

## 模組化設計概念

- 討論篇
- 架構篇
- 元件篇

## 討論

### 結構設計討論，你是哪個等級？(v

- Level 1：頁面(page)， 想到什麼就寫什麼
- Level 2：佈局([Layout](https://www.figma.com/design/ZQn0etbtIsCrmkHqFeeLKo/%E5%88%87%E7%89%88%E7%9B%B4%E6%92%AD%E7%8F%AD---%E7%9B%B4%E6%92%AD%E6%95%99%E6%9D%90?node-id=176-2&t=a3hnPjoSn5e0fDaa-0))， 會額外拉出來處理
- Level 3：格線(grid) 有固定的格線系統
- Level 4：模組(component) 會將常用的內容拉出來模組化，並且了解 OOCSS 的概念
- Level 5：工具(helper、util)，會將常用的 class 拉出來獨立使用
- Level 6：會用 Bootstrap 或 Tailwind 來加速開發

### 研究：

- 網站有沒有符合以下概念
- OOCSS
- 容器與內容
- 結構與樣式
- 主要使用框架
- Bootstrap
- Tailwind
- 無特定框架
- 命名
- 有沒有採用外觀、視覺化命名（難）
- 有沒有運用到 Utilities (原子化設計)

### 命名方式

- 產品的卡片列表
- product list…

問題：如果換頁還可以用嗎？

1. 用外觀命名：難度高，少部分網站可以做到
1. 好的：card、button、btn-primary
2. 受到使用限制的：product-list、register-btn
2. 用視覺功能命名：
1. 好的：Slider
2. 不好的：Banner
3. 輔助、雜項、原子化：bg-primary、mt-3、d-flex
1. 優點：直接面對具備彈性的區塊
2. 缺點：可用性低、互動性受到限制

案例網站：

### OOCSS
- Shopify
- Sketch：https://www.sketch.com/
- Apple：https://www.apple.com/tw/

### 用到原子化
- GitHub：https://github.com/
- Bootstrap Theme

### 較少模組化
- CSS Awards：https://www.cssdesignawards.com/

> 延伸討論，為何沒有模組化？為什麼有模組化？
有什麼網站會需要做模組化、OOCSS、命名管理
- 頁面多需要統一管理
- 可重複使用

## 模組化適合哪些類型網站
1. 形象網站
2. 純活動動態網站
3. 系統網站
4. 應用程式（Facebook）
5. 電商網站

適用的網站類型：
3,4,5

哪些網站不適用
1,2

## 架構篇

本地端使用 Live Sass：https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass

→ **注意，此方法不可與 Vite 共同使用**

### 檔案結構

- Bootstrap：https://github.com/twbs/bootstrap/tree/main/scss
- 甜點電商：https://github.com/Wcc723/F2E-PK/tree/master/source

@import "variable"; // 變數
@import "bootstrap"; // Bootstrap

// 1. 自定義可複用元件
@import "button";
@import "...";

// 2. 原子化、工具項 (進階)* （當 Bootstrap 不足時
@import "utilities";

// 3. 共用樣式
@import "layout"; // 共同結構，例如後台網站的整體框架

// 4. 分頁樣式 （非模組化網站才會用到）
@import "index";
@import "page1";

## 元件抽離原則

### 起手式

1. 容器與內容分離
2. 結構與樣式分離
3. 原子化

### 封裝過程

1. 避免過度巢狀：要清楚知道每個層級會帶來的負面影響
2. 避免互相影響：盡可能套用 class
3. 當有使用框架（Bootstrap、Tailwind），可混用框架本身的特性
4. 可以加入互動、狀態、額外樣式的效果
1. 結構與樣式分離
5. 建立成獨立檔案

### 封裝案例

(密)

### 何時用 BS5 何時用 Tailwind

1. 先了解 Bootstrap，目的是：
1. 理解正確的規範
2. 了解元件中，有哪些樣式、狀態、結構等
2. 認識 Tailwind 可以做到什麼、不可以做到什麼

### Bootstrap

- 以 OOCSS 為基礎
- 有提供 Utilities 作為輔助
- **特點：預設提供大量元件可供直接運用**

評論：

- 適合初學者使用，就算對於 CSS 掌握度不高，也能做出基本版型
- 創意容易被受限

### Tailwind

- **特點：以 Utilities 原子化設計為基礎**
- 有提供 Tailwind UI 供參考
- 可透過預處理器自行封裝元件

評論：

- 適合進階開發者使用，因為使用時依然很看重基本 CSS 概念
- 優勢在於不需要一直定義元件、想元件命名
- 新手使用容易缺東缺西（狀態、延伸樣式）

## 第八堂主線任務

https://rpg.hexschool.com/#/training/12062817613307865587/board/content/12062817613307865588_12062817613307865609?tid=12062817613327263632