文件連結：https://hackmd.io/re7WcOoVRBaYypTHA4TUcQ?view

# 第八週 - CSS 模組化管理

* 記得錄影
* 獎品截止日 [說明](https://hackmd.io/@hexschool/By3Q7SAIC/%2F6cTcBIoPQHWY_mD6lTRZ_A)
* 最終作業說明（揪團完成）：
* 可以自己找組員，像是專題班的就能直接用專題班的分組，如果是直播班的可以在頻道中找組員
* 分組繳交時，需要全部的人都一起繳交，然後標上組員的暱稱，以便於團隊一起審核通過
* 每位成員在 Git 紀錄上至少要有完成一頁
* AAPD 合作報名開始
1. 達到第六週作業等級 2（至少做兩頁含 RWD，其中一頁必須為首頁）
2. 填寫報名表單（填寫至 8/25(日) 23:59）：https://forms.gle/aZa7sa6qajf7zE8S7

## 截止繳交作業時間點

- 主線、心得牆任務繳交期限：9/8(日) 23:59:59
- Google 表單獎品申請截止日：9/10(二) 23:59:59
- 9/13(五) 80% 獎品兌現 - 【網頁動態】CSS 動態的運用技巧

## 模組化設計概念

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

## 討論

### 結構設計討論，你是哪個等級？(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：工具(helper、util)，會將常用的 class 拉出來獨立使用
- Level 5：模組(component) 會將常用的內容拉出來模組化
- Level 6：會用 Bootstrap 或 Tailwind 來組合 component
- [React Tailwind Component](https://github.com/Webabil/modal-react-tailwind/blob/master/src/component/Modal.jsx)
- [Vue Tailwind Component](https://github.com/OCRVblockchain/vue-tailwind-pagination/blob/main/src/components/VueTailwindPagination/index.vue) -> 注意：這其實要收費，所以用的人有限

### 研究：

- 網站有沒有符合以下概念
- OOCSS
- 容器與內容 90% 以上會符合
- 結構與樣式 50%
- 主要使用框架
- 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. 檔名：_utilities.scss

案例網站：

- Shopify
- Bootstrap Theme
- Sketch：https://www.sketch.com/
- AWS：https://azure.microsoft.com/zh-tw
- GitHub：https://github.com/
- 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 "reset";  // reset.css(如果有使用 Bootstrap 請勿載入)

// 1. 元件(進階)* 或 Bootstrap
@import "bootstrap";
@import "button";
@import "...";

// 2. 雜項(進階)*
@import "utilities";

// 3. 共用樣式
@import "layout"; // 共同框架、第一層

// 4. 分頁樣式
@import "index";
@import "page1";

## 元件抽離原則

### 起手式

1. 容器與內容分離
2. 結構與樣式分離
3. 命名上盡可能以視覺為基準
1. 額外命名技巧 [BEM](https://ithelp.ithome.com.tw/articles/10160545)

### 封裝過程

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

### 封裝案例

(密)

### 何時用 BS5 何時用 Tailwind

都用，看哪個順手

### Bootstrap

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

評論：

- 適合初學者使用，就算對於 CSS 掌握度不高，也能做出基本版型
- 當元件不足需要擴增時，還是需要乖乖想名字
- 創意容易被受限

### Tailwind

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

評論：

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

## 第八週主線任務

https://rpg.hexschool.com/#/training/12062289980086964008/board