TSCSS: Component CSS Parameterization

Transcript

1. 元件 CSS 參數化 TSCSS / Simon Pai
2. 平常在做什 • 前端 程師 @ 奇科 – ZK: Java servlet based web UI framework – Quire.io: 樹狀的 task manager
3. 平常在做什 • 共 創辦人 @ Bookshow 說書會 – 知識影音化 Open Meeting – 訪談錄影 活動直播
4. 為什 要 CSS 參數化 • 統一設計 – 外觀一致性 • 統一實作 – DRY Do ’t Repeat Yourself 好維護
5. 如何 CSS 參數化 • 統一設計 – Design guildline • 統一實作 – 良好的 CSS class 命 策略 – CSS library / pre-processor：LESS Scss/Sass 等
6. 如果你是元件集的創作者 • 統一設計 – 外觀一致性... 但無法預測使用者會如何排列你 的元件 – 客戶會希望能客製整套外觀 (佈 /Theme) • 統一實作 – DRY Do ’t Repeat Yourself 好維護 – 大幅降 客製佈 的 本 • 這是 ZK 尋求 CSS 參數化的最大動機
7. 元件與佈 的乘法效應 • ZK 7 有 50+ 個元件與 4 個官方佈 – (以及一堆客戶客製的佈 ) • 每多一個佈 ，要多刻 50+ 個元件的 CSS • 每多一個元件，要多刻 4 個佈 的 CSS
8. 從 ZK 這個產品說起 • ZK 是個元件集 (component set) • 2006 (ZK 1) - 現在 (ZK 7) • Panel, Tabbox, ... 等 50+ 個元件
9. ZK 3 長這樣
10. ZK 5 長這樣 • 看不 去， 到了一 設計師
11. 但是並沒有解決客製 本問題 • 掃一遍 CSS 中的色 碼，看起來那 單 純的孩子，裡面居 然有 50+ 種顏色 • 客製一套佈 還是 需要重做一套設計 + 重刻一遍 CSS
12. 問題在於硬幹的設計流程 元件 外觀 憑感覺維持一致性
13. 如何為元件集打造統一外觀 • 統一設計 – 因為無法掌握使用者如何排列你的元件，必需 思考外觀背後的理由 • 統一實作 – 根據理由而不是根據外觀來抽變數
14. 統一實作前，必先統一設計
15. 硬幹的設計流程 元件 外觀
16. 富有哲學氣息的設計流程 元件 外觀 元件語義 元素外觀
17. Separator (分隔線) • 分隔線的意義是什 ？
18. Separator (分隔線) • 分隔線的意義：區分 或
19. Groupbox • ZK 有一個元件叫 Groupbox，大家覺得它的 意義是什 ？
20. Groupbox • Groupbox 的意義：區分 外
21. 元件中的語義 • 區隔 (grouping) • 操作 (operation) • 狀態 (state) • 部 (parts) 等
22. 元件中的語義 • 區隔 (grouping) – 容器 (container) 與分隔線 (separator)
23. 元件中的語義 • 操作 (operation) – 文字輸入 (text input) – 可以按的 (clickable) – 可以拖的 (draggable) 等 • 在各種 design guildline 都有探討
24. 元件中的語義 • 狀態 (state) – 商業邏輯 (business logic) • Selected • Error 等 – 互動 (interactive) • Clicked • Hovered • Focused • Disabled 等
25. 元件中的語義 • 部 (parts) prpr -icon -background -border -text
26. 元件中的語義 • 部 (parts) -body (-head) (-foot)
27. 元件中的語義 • 部 (parts) -item -item -item -item -item Collection
28. 別鑽牛角尖 (一) • 並不是符合某項語義就一定要根據它來設 計 – 而是你 可以 根據它來設計 – 遇到衝突依然要靠 人智慧取捨
29. 別鑽牛角尖 (一) • Tabbox (摺疊式) 的 head 部 時也是 clickable – 要做的像其他元件的 head 還是像 button？ – 取捨：ZK 覺得像 head 比較 重要，clickable 用 cursor 表達就好 – jQuery UI 的 ThemeRoller 就把 樣的部分做 button 的顏色，見人見智
30. 別鑽牛角尖 (二) • 語義元素無法窮盡所有外觀要素 – 並非所有外觀細節背後都可以 到乾淨的理由 – 狀況好的 大約可以涵蓋 70-80% – 剩 的細節硬幹無妨
31. 統一設計後，必須統一實作
32. 建立 demo • ZK Theme Demo – 所有外觀都盡量展示出來，因為元件是活的 有很多狀態，非常容易掉芝 – 把設計 認定應 外觀一致的元件排在一起 – 客製佈 的時候也方便直接展示給設計師或客 戶看
33. DRY CSS • 去除 CSS 中重覆資訊的方法 – 抽出 CSS class – 將 樣的 CSS 值抽 變數或 mixin (LESS/Scss/etc) • 決定 CSS class 規劃 – ZK 礙於其 CSS 規劃無法抽 class，歷 共業 – 請參考 Bootstrap 3 或 Semantic UI 等套件的實作
34. CSS class 命 策略 • 表意 – z-pa el , z-panel- ody 元件) – sele ted 商業邏輯) • 表象 – gree , s all , light
35. CSS 變數命 策略 • 表意 – @z-panel-border-color: @border-color; – @border-color : @light-green; • 表象 – @light-green: #7EA656; – @large-font-size: 32px;
36. CSS Class • CSS class 是 DOM 與外觀之間的合約 Class DOM Element DOM Element Style Value Style Value
37. 表意與表象 • CSS 最終都是將象 (外觀值) 賦予到意的身 – 變數之間都是把表象的 assign 給表意的 • @text-color: @gray; • @gray: @text-color; (?) – 表象的 class 裡也不會放表意的變數 • .gray { color: @text-color; } (?)
38. CSS 參數化前 表意 表象 Class Class 值
39. CSS 參數化後 表意 表象 Class Class 值 變數 變數 變數
40. 別鑽牛角尖 表意 表象 Class Class 值 變數 變數 變數
41. 表意與表象 • CSS 最終都是將象 (外觀值) 賦予到意的身 元件 外觀 元件語義 元素外觀 表意 表象
42. ZK 7 長這樣 • 套從 ZK 5 繼 來，參數化後的佈
43. 第四套佈 • 依靠參數 + 微調做出 微軟系的佈 Atlantic
44. ZK 7 Theme Rolling • 關鍵字: ZK ThemeRoller
45. 總結一
46. 統一實作前，必先統一設計 統一設計後，必須統一實作
47. 設計流程的秘訣 元件 外觀 元件語義 元素外觀 表意 表象
48. 參數化 CSS 的秘訣 表意 表象 Class Class 值 變數 變數 變數
49. 商服務 • 奇科 – 徵 職 UI/UX 設計師 前端 程師 – jobs @ potix.com • Bookshow – 合作的網站設計師 影片視覺設計師 – 請來 或 hello @ bookshow.tw