# 第八週 - CSS 模組化管理

* 記得錄影
* 獎品截止日說明

:::spoiler 獎品

:::

## 截止繳交作業時間點

* 8/25(五) 第八週上課結束
* 9/10(日) 23:59:59 作業繳交截止日、<a href="https://rpg.hexschool.com/training/36/task?type=detail&id=354" target="_top">心得牆任務截止日</a>
* 9/12(二) 23:59:59 申請獎勵截止 <a href="https://rpg.hexschool.com/training/36/show?embedhm=jfSkpDBCQTqeTr9xTuPv_g" target="_top">獎品登記填表</a>
* 9/15(五) 80% 獎品兌現 - 團隊管理 CSS 直播課
* **9/17(日) 作品專題成果發表會**

## 本堂課重點

1. SCSS 結構再進化
2. 知道容器與模組的分離
3. 網頁架構的演進

## [網頁建置流程](https://cacoo.com/diagrams/VbC7q11GWcnik5BV/16E53)

* CSS Reset
* [myerweb](https://meyerweb.com/eric/tools/css/reset/)
* [normalize](https://necolas.github.io/normalize.css/)
* Base
* 連結顏色
* 標題設計

## 設計模式講解

* [SMACSS](https://docs.google.com/presentation/d/1BM12w_u-Y-oTqYAIBhq7CtUhcQ5IE-ZIg2PO205iVVs/edit?usp=sharing)
* 擴增子模組
* SCSS 結構
* [OOCSS](https://ithelp.ithome.com.tw/articles/10184862)
* 結構與樣式分離
* 容器與內容分離
* [BEM](https://ithelp.ithome.com.tw/articles/10160545)
* __ 區塊
* -- 修飾符號

## 中場休息
* 洧杰校長公布加碼

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

* Level 1：頁面(page)， 有一頁就新增一頁
* Level 2：佈局([Layout](https://cacoo.com/diagrams/G4ML24CopC3t8VZX/CD531))， 會額外拉出來處理
* Level 3：工具(helper、util)，會將常用的 class 拉出來獨立使用
* Level 4：格線(grid) 會有自己的格線系統
* Level 5：模組(component) 會將常用的內容拉出來模組化
* Level 6：會用 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)

## 結論：何時用 BS5 何時用 Tailwind
1. 都用，看哪個順手
2. 小網站用 BS5 建立好的元件比較快
3. 大型網站，尤其是 2B 營運系統、人資系統，tailwind 來建立各種 JS 元件會比較適合

## 範例網站
1. [Netflix](https://www.netflix.com/tw/)
2. [館長電商](https://notorious-2019.com/Default.aspx)
3. [APPLE Mac](https://www.apple.com/tw/imac-24/why-mac/)

## 模組化概念 (v

* 內容會重複出現在其他區域兩個地方以上就需要，[範例連結](https://cacoo.com/diagrams/G4ML24CopC3t8VZX/E5EDC)。

## 結構編號([學員作業](https://hackmd.io/48BTVPQVR_y4jq2E0PFHXQ?view))

1. 佈局 layout、頁面 page (只出現一處)
2. 工具 utilities
3. 元件 component (出現兩處以上)
4. 容器 container、grid

## 新手到進階的投入過程 v

1. 沒有模組化概念(兩個 list 一樣、class 繼承無法拆離)
2. 會開始試著拆出來
3. 會開始建立 component

## 看別人網頁結構或學 CSS4 新技巧時，請看對方的 HTML CSS 組合，或判斷你在學什麼，例如說

`class="site-logo order-md-1 order-2 mr-auto d-none d-md-block"`

## 最終重點

* 需要練功的細節，如何將 Page 與 Layout 的內容都變成 component 與容器，[範例](https://github.com/Wcc723/F2E-PK/tree/master/source/stylesheets)
* 避免過度設計化
* 在觀看別人的框架時，觀看他的設計思維與切入重點
* OOCSS
* 結構與樣式分離 ( .btn .btn-lg)
* 容器與內容分離 (格線系統)
* [7+1 SCSS](https://gist.github.com/rveitch/84cea9650092119527bc)
* [MOPCON CSS 架構演化史影片](https://www.youtube.com/watch?v=YF2yKIT5QS4)

## 第八週主線任務

* <a href="https://rpg.hexschool.com/training/36/task?type=detail&id=353" target="_top">第八週 - 大型線上服務</a>