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

9ae4f3862d4cb0771cfd36e43252f755?s=47 Kuro Hsu
June 05, 2019

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

v-tw meetup #1 2019/06/05

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

9ae4f3862d4cb0771cfd36e43252f755?s=128

Kuro Hsu

June 05, 2019
Tweet

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 出了了什什麼問題

  12. None
  13. None
  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

  17. None
  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 賦予不同⾯面貌
  25. None
  26. None
  27. None
  28. None
  29. None
  30. !important

  31. None
  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>
  39. None
  40. None
  41. None
  42. 模組化、架構化

  43. 良好的 CSS 架構 • 可預測性 - Predictable • 可重複使⽤用 -

    Reusable • 容易易維護 - Maintainable • 可擴充性 - Scalable
  44. 第⼀一次⼯工業⾰革命 Sass / Compass / Stylus…

  45. None
  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
  57. None
  58. None
  59. None
  60. None
  61. .block { ... } .block--modifier { ... } .block__element {

    ... } .block__element--modifier { ... }
  62. 樣式原⼦子化 Atomic CSS 也有⼈人稱 functional CSS 物件導向弱掉了了 這年年頭叫 functional 比較潮

  63. Good Bad

  64. None
  65. None
  66. None
  67. 新需求

  68. 新需求 - 2

  69. None
  70. 新需求 - 3

  71. 吾⽣生有涯 ⽽而需求無涯 - 莊⼦子 沒有說過

  72. None
  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 …

  75. None
  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

  79. None
  80. None
  81. Scoped Style

  82. None
  83. None
  84. 結論

  85. 語意 vs 樣式

  86. 肥 CSS 還是肥 HTML

  87. 關注點分離的昨是今非

  88. 選擇來來⾃自經驗的累積 所有⽅方法的背後都有個難解的問題

  89. ⽅方法無分好壞 沒有絕對答案

  90. 適合你的才是正姐 正解

  91. ⼈人⽣生⽽而⾃自由, 卻無往不在枷鎖之中 - 盧梭

  92. None
  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