CSS 不是我們想像的這麼簡單! [台北場]

v-tw meetup #1 2019/06/05

活動錄影: https://www.youtube.com/watch?v=dtX51ru_eXU

Transcript

1. CSS 不是我們想像的 這麼簡單! Kuro Hsu @ v-tw meetup #1 2019/06/05 ̨̏ఙ
2. 感謝場地⽀支援
3. Kuro Hsu https://kuro.tw kurotanshi@gmail.com @kurotanshi
4. 我今天不是來來教⼤大家寫 CSS 的
5. ⾝身為前端⼯工程師 你認為 CSS 是什什麼？
6. 代碼寫進去 畫⾯面跑出來來 前端發⼤大財 ⼤大家以為的 CSS
7. 實際上的 CSS
8. CSS 好難 CSS
9. https://www.slideshare.net/kurotanshi/css-oocss-smacss-bem
10. ׬ https://www.slideshare.net/kurotanshi/css-oocss-smacss-bem
11. CSS 出了了什什麼問題
14. Simple !== Easy
15. ⿊黑暗時期 樣式、腳本、結構⼤大鍋炒 <font size="3" color="red">…</font> <center onclick="…">…</center> <b>…</b> <i>…</i> <u>…</u>
16. https://twitter.com/ivantodorov/status/324420248201736195
18. CAPFPP Copy And Paste From Past Projects
19. 古典時期 網⾴頁結構的關注點分離
20. http://www.csszengarden.com/tr/zh-tw/
21. http://www.csszengarden.com/219/
22. http://www.csszengarden.com/215/
23. http://www.csszengarden.com/220/
24. • ⼿手⼯工藝之美 • HTML、CSS、JS 依照功能拆分 • 結構良好、具語意的 HTML • 不同的 CSS 賦予不同⾯面貌
30. !important
32. 困境 • Class 命名 • CSS Code 難以重複使⽤用 • 樣式的優先序與衝突 • !important
33. 啟蒙時代 CSS ⽅方法論的崛起
34. OOCSS 那年年代物件導向正夯
35. 兩兩⼤大原則 • Separate Structure and Skin
 結構與外觀分離 • Separate Container and Content
 容器與內容分離
36. <div class="media"> <div class="media-img"> <img src="http://placehold.it/80x80" alt=""> </div> <div class="media-body"> <p>...</p> </div> </div>
37. <div class="media media-shadow"> <div class="media-img"> <img src="http://placehold.it/80x80" alt=""> </div> <div class="media-body"> <p>...</p> </div> </div>
38. <div class="media media-no-border"> <div class="media-img"> <img src="http://placehold.it/80x80" alt=""> </div> <div class="media-body"> <p>...</p> </div> </div>
42. 模組化、架構化
43. 良好的 CSS 架構 • 可預測性 - Predictable • 可重複使⽤用 - Reusable • 容易易維護 - Maintainable • 可擴充性 - Scalable
44. 第⼀一次⼯工業⾰革命 Sass / Compass / Stylus…
46. SMACSS Scalable and Modular Architecture for CSS
47. 將結構分類 • Base - CSS Reset / CSS Normalize / global styles… • Layout - header / footer / content / sidebar … • Module - list / button / components … • State - active / error / hidden … • Theme
48. Layout
49. Module
50. State
51. CSS 與 HTML 分離
52. .box, .box h2, .box ul, .box p { … }
53. .box, .box h2, .box ul, .box p { … } .box, .box .header, .box .body { … }
54. .box, .box h2, .box ul, .box p { … } .box, .box .header, .box .body { … } .box, .box-header, .box-body { … }
55. 命名學 BEM
56. 元件時代的濫濫觴 • B - Block • E - Element • M - Modifier
61. .block { ... } .block--modifier { ... } .block__element { ... } .block__element--modifier { ... }
62. 樣式原⼦子化 Atomic CSS 也有⼈人稱 functional CSS 物件導向弱掉了了 這年年頭叫 functional 比較潮
63. Good Bad
67. 新需求
68. 新需求 - 2
70. 新需求 - 3
71. 吾⽣生有涯 ⽽而需求無涯 - 莊⼦子 沒有說過
73. Thinking in Atomic • 變化是可被預測的 - Changes are predictable • 作⽤用範圍有限 - Scope is limited • 精簡的 CSS - CSS is lean • 與元件解耦 - Components are portable • 初學者易易上⼿手 - Beginner-friendly
74. ⼤大 Component 時代 CSS Module、CSS in JS、scoped styles …
76. • CSS Modules，透過 webpack 編譯 • 各種 CSS in JS 解決⽅方案 ( React ) • 寫在 .vue file 中的 scoped CSS • Angular 裝飾⼦子的 CSS • 現代的關注點分離 - 從功能到元件
77. HTML Script Style .vue file
78. CSS Modules in Vue
81. Scoped Style
84. 結論
85. 語意 vs 樣式
86. 肥 CSS 還是肥 HTML
87. 關注點分離的昨是今非
88. 選擇來來⾃自經驗的累積 所有⽅方法的背後都有個難解的問題
89. ⽅方法無分好壞 沒有絕對答案
90. 適合你的才是正姐 正解
91. ⼈人⽣生⽽而⾃自由， 卻無往不在枷鎖之中 - 盧梭
93. CSS 很⾃自由 享受⾃自由要有更更⾼高的⾃自律律
94. 資源推薦 & 友情⼯工商
95. https://cssguidelin.es/
96. https://csswizardry.com/
97. https://www.youtube.com/user/AmosLee1
98. https://www.hexschool.com/courses/sass.html
99. 下期預告 v-tw meetup 七⽉月份活動，時間地點未定
100. Thanks