MOPCON議程筆記：廖洧杰老師-CSS 架構演化史
影片來源：MOPCON 2020 議程錄影
分享人：廖洧杰 六角學院 前端工程師
內容：
CSS 誕生到至今 26 個年頭，為了符合瀏覽器使用者的需求而不停演化。本議程將帶領會眾，探討近年設計模式與框架的演進，深入了解 CSS/SCSS Component、Utility 發展史，同時將分享 Bootstrap 5、Tailwind CSS 來介紹未來 CSS 架構趨勢。
三大主軸：容器container、元件component、通用類別utilities
以按鈕舉例，一開始習慣在HTML 標籤選擇器撰寫，並使用後代選擇器拆分樣式，當嘗試合併class時會導致選擇器過於臃腫，此時開始有元件設計...
一、容器 Container
設計時一定要先產生容器，bootstrap 為隔線系統
二、元件設計 Component
以OOCSS為例-容器與內容分離
不再跟容器綁在一起，元件應該抽離，在任何容器都可以使用
class="btn"
class="btn btn-green btn-lg"元件裡面還可以有子元件，子元件也可以成為容器，以卡片為例可分為：
.card、.card-header、.card-body
不會看到容器與元件融合（如：.col-9 .card{}）
因為不可能寫一個卡片，只存在col-9中
三、通用類別 Utilities
使用時機：當元件需要微調時
結構與樣式分離易導致元件臃腫，無法專注於元件本身的開發，元件搭配通用類別後，解決了元件臃腫化。
CSS 框架時間軸:
2010---Bootstrap--2015--tailwindcss---2020---BS5
Bootstrap 4
開始加入通用類別的概念
Bootstrap 5
Bootstrap 5 讓我們有辦法自訂通用類別，透過編譯的方式，編譯出 class 設定，除此之外也支援RWD斷點設計。
Tailwind CSS ：utility first
此框架只有通用類別，可以像積木一樣組出想要的東西
範例：
<button class="bg-blue-300 text-white font-bold py-4 rounded"
Button
</button>優點：
1. 偽類一目了然(hover:bg-blue-700)
2. 能搭配段點來做客製化(md:hover:bg-red-700)
介紹：
1. 不建議直接使用CDN，因為mb很大
2. 採用 PostCSS 來編譯
3. 雖然 mb 很大，但是是可以壓縮的（有用到的才complier出來）
4. 可用 tailiwind variant 為特定utility 增加偽類、斷點
5. 可使用apply設計成元件
主要核心為 tailwind.config.js 設定檔，這個設定檔有點像 Bootstrap 的 SASS 變數
結尾
1.Setting
變數variables：
- BS5：.SCSS
- Tailwind：.js
- CSS4 ：也有變數、可以靠這個做管理
2. Reset、Base
Reset
BS5、Tailwind 都使用 Normalize
Base
設定全域網頁標籤(如：a{color:#ff0000})
3. Tools-開發資產
bootstrap5：新的機制- helper 資料夾：
將很多 SCSS 小功能（常使用、有技巧的）做統一的管理
4. Components
- BS4：有component
- Tailwind：沒有，希望專注於元件的開發
5. Utilities
- Tailwind：王者
- BS5：佔30%
6. Libarary
Bootstrap5：RFS（Responsize font size）：響應式文字設定：
使用vw（依照螢幕解析度伸縮） 解決這個問題
懶人建議包
Bootstrap 新手建議學
1. utility 不適合新手開發
2. Bootstrap 有 CSS 元件、JS 套件
3. Bootstrap 會顧及無障礙與使用這體驗
Tailwind 適合自幹框架派
1. utility-first 與 JS SPA Component
2. utility-first 適合有一定 CSS 開發經驗的開發者