# CSS 架構演化史 - 廖洧杰

{%hackmd rG6pzIawQKe5cHU4rycgYg %}

> 曾經是六角的學員，可以到學員社團看到公開簡報
>
:::success
:::spoiler TableOfContent
[TOC]
:::

### 三大主軸
- 容器 Container
- 元件 Components
- 通用類別 Utilities

#### 歷史補充
無 CSS：1990 年代前只寫HTML

### 元件設計 Components
- OOCSS 為例
- 如何減少重複的 code：元件抽離
- 容器與內容分開
- 結構與樣式分離

### 容器 Container
.card
.card-header
.card-body
子元件也可以是容器

-container
.navbar-brand
(還有更多，請幫忙補充上，謝謝)

### 不會看到容器與元件混合

-

### 通用類別 Utilities
通用類別的用途
- 需要間距微調
- 滿足各種需求，結構與樣式分離導致元件臃腫
- Bootstrap4 導入通用類別 Utilities 概念
- 麵包屑元件、卡片元件等用途不同的元件依然可以有自己的彈性
- 要透過 html class 的標籤去識別元件狀態及微調

(前面講太快沒打到)
<!-- 以上有誤再麻煩各位大大修正 -->

結構與樣式分離易導致元件臃腫
在 BS4 開始加入通用類別概念

.bg-primary
.bg-secondary
.bg-success

### BS5 自訂通用類別
- 支援斷點RWD
- 做flex位移、做transform、做透明度改變
- 支援:before、:after 偽元素，及:hover、:active等狀態處理，且**支援斷點**

### CSS框架時間軸
- 2010: BS2
- 2015: tailwind css
- 2020: BS5(?)

Utility-First
- Tailwind：用 class 組合出如 CSS 高客製化效果
- 如 BS 只支援狀態=>更支援斷點
- 不建議直接用 CDN (2MB 偏大)
- PostCSS 編譯
- tailwind.config.js：壓縮容量、只留使用部分
- 通用類別產生器
- 再設計包成元件，不用一直重複貼 class
<!-- BS5沒辦法用class去訂出元件的狀態 例：hover、active、focus 這樣？
-->
- 現場調查：1/5喜歡手刻、其他偏用框架

### 版型金字塔
Setting, Reset、Base, Components, Utilities, Library
- setting
- 變數 variables
- BS5 (.SCSS)
- Tailwind (.js)

- reset, base
- BS5, Tailwind
- 兩框架都採用了 Normalize
- Browser-reset 差異介紹
種類：meyerweb、Normalize
特色：樣式清得一乾二淨、保留基本樣式

| 種類 | 特色 | 範例(ul li) |
| -------- | -------- | -------- |
| meyerweb | 樣式清得一乾二淨 | 選單一<br>選單二<br>選單三 |
| Normalize | 保留基本樣式 | ・選單一<br>・選單二<br>・選單三 |

- Base-rebot
- reset 後緊接 rebot，設定全域標籤
- 減輕各類設定負擔
- 前端工程師與設計師共同討論
- Base-type
- Bootstrap type
- 設定全域標題
- 寫死字型大小前，務必與設計師確認清楚
- 開發
- helper
- Components
- BS4~BS5有
- Tailwind 沒有
- Utilities
- Tailwind 王者
- BS 則有30%
- Library
- 第三方CSS套件
- BS5 RFS(Responsive Font-size) 響應式文字設定
- 有規則去制定在各種寬度時使用最舒適的字體大小
- 不使用BS也可以思考如何使用其概念

### 學習建議
- 新手建議學BS
- utility 不適合新手開發
- Bootstrap 有 CSS 元件、JS套件
- Bootstrap會顧及無障礙與使用者經驗
- Tailwind適合自幹框架派
- util-first與JS SPA 套件相性很好
- util-first適合有一定CSS開發經驗的開發者

### 團隊適合用甚麼

| | Bootstrap5 | Tailwind|
|:---:|:---:|:---:|
|風格|component |utility|
|格線|flexbox|grid|
|核心|SCSS|PostCSS|
|元件|有|Tailwind UI|
|IE 支援|:X:|IE 10+|
|npm|非強制|需要|
|客製化|中|高|
|上手|簡單～中等|中等～困難|

> NPM：工程師使用終端機開發套件管理，必須用命令提示字元去做編譯
1. 元件應該可以隨意地移動到其他地方
2. 思考元件的通用類別，避免元件臃腫化
3. 不應該汙染你的元件，造成其他團隊在CSS管理上的負擔

<!--補Code-->

###### tags: `MOPCON 2020`