# 2021 夏季切版直播班 week8 - CSS 模組化管理
###### tags: `CSS` `SCSS` `Bootstrap` `上課筆記`
2021/08/20 上課筆記

## 元件化設計模式
* 設計元件 - 通常都以功能性、外觀來命名。
例如：進度條 progress、卡片 card、按鈕 button。
* 取代新手時期建議的語意化命名。
例如：index-banner、.faq h2…。

## 元件設計&元件子層設計
* 進度條 progress
元件：ul.progress
子層：li.progress-step

## 精簡管理
* 多用 util 和 components 取代，以減少 pages 與 layout 的 CSS code。

## 現代化網頁設計不再具有方向性
* 因應各種裝置產生響應式設計(RWD)，網頁不再具有「方向性」，因此應避免 left、right 命名方式。
例如：bootstrap 也將 left 改為 start、right 改為 end，可參考此模式。

## 拆分網站流量的方法
* 網站可拆分不同網址，指向不同主機
* MOMO PC版 & mobile版(不同網址)
* 六角學院網站與金流網頁拆分

## 使用 Bootstrap 時，如何搭配 CSS Reset
* Bootstrap 的 基本樣式設定檔為 reboots.scss(即為 reset+base)
* 可自訂 base.scss 去清空+覆蓋 Bootstrap 的 reboots.scss 樣式。

## 自訂 class 較 @mixin 精簡
* @mixin 較適合用於斷點設計
* 使用自訂 class 可使 CSS 更精簡

.bgCover {
background-size: cover;
background-position: center;
}

@mixin bgCover(){
background-size: cover;
background-position: center;
}

@include bgCover;

## CSS 設計模式講解
* [OOCSS](https://ithelp.ithome.com.tw/articles/10184862)
* 結構與樣式的分離
* 內容與容器的分離
* [BEM](https://ithelp.ithome.com.tw/articles/10160545)
* __ 區塊
* – 修飾符號
* [SMACSS](https://docs.google.com/presentation/d/12EBuvos1SIwUWzIsl8KCp9W96J6jbwXjKuGMKtG5PQc/edit?usp=sharing)
* 擴增子模組
* SCSS 結構