CSS 架構演化史 - 廖洧杰

歡迎來到 MOPCON 2020 共筆 :mega:
共筆入口：https://hackmd.io/@mopcon/2020
手機版請點選上方 按鈕展開議程列表。

曾經是六角的學員，可以到學員社團看到公開簡報

TableOfContent

三大主軸

  • 容器 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
  • 現場調查：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 樣式清得一乾二淨 選單一
選單二
選單三
Normalize 保留基本樣式 ・選單一
・選單二
・選單三
  • 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管理上的負擔
tags: MOPCON 2020
Select a repo