漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM ���例
•
345 likes•132,584 views
2014/05/26 - F2E.tw Party 8th.
Report
Share
Related slideshows
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
- 1. 漫談 CSS 架構⽅方法 - 以 OOCSS, SMACSS, BEM 為例 Kuro Hsu @ F2E.tw Party 8th 2014/05/26
- 3. – Chris Eppstein “CSS is simple..., It’s simple to understand. But CSS is not simple to use or maintain.” http://chriseppstein.github.io/blog/2009/09/20/why-stylesheet-abstraction-matters/
- 4. ! .font-‐18{ font-‐size: 18px; } ! ! .red-‐text{ color: red; }
- 6. <div class="font-‐18 red-‐text box"> 這是個錯誤訊息。 </div>
- 7. ! .font-‐18{ font-‐size: 18px; } ! @media only screen and (max-‐width: 320px){ ! }
- 8. .red-‐text{ color: orange; } ! .font-‐18{ font-‐size: 18px; } ! @media only screen and (max-‐width: 320px){ .font-‐18{ font-‐size: 14px; } }
- 9. .red-‐text{ color: orange; } ! .font-‐18{ font-‐size: 18px; } ! @media only screen and (max-‐width: 320px){ .font-‐18{ font-‐size: 14px; } }
- 10. #news h2{ border-‐bottom: 1px solid #000; padding: 1em; font-‐size: 18px; font-‐weight: 700; }
- 11. #news h2{ border-‐bottom: 1px solid #000; padding: 1em; font-‐size: 18px; font-‐weight: 700; } #faq .title{ border-‐bottom: 1px solid #000; padding: 1em; font-‐size: 18px; font-‐weight: 700; }
- 12. #news h2{ border-‐bottom: 1px solid #000; padding: 1em; font-‐size: 18px; font-‐weight: 700; } #faq .title{ border-‐bottom: 1px solid #000; padding: 1em; font-‐size: 18px; font-‐weight: 700; } #service .feature .title{ border-‐bottom: 1px solid #000; padding: 0.5em; font-‐size: 16px; }
- 13. .column_2 #inbox .list { ... } .column_3 #inbox .list { ... } .column_3 #inbox .list .name { ... } .column_3 #inbox .list .name p { ... } .column_3 #inbox .list .name.reply { ... } .column_3 #inbox .list .name.reply a { ... } ! #top .column_3 #inbox .list.left { ... }
- 14. !important
- 16. 糟了，是世界奇觀
- 17. Ctrl + a ! del
- 19. – Nicole Sullivan “We have been doing it all wrong…, Our (CSS) best practices are killing us! ” http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/
- 20. – hlb “Code for system, Not for pages.” https://speakerdeck.com/hlb/maintainable-css-with-sass-and-compass
- 21. 良好的 CSS 架構 • 預測 - Predictable • 複⽤用 - Reusable • 維護 - Maintainable • 延展 - Scalable http://philipwalton.com/articles/css-architecture/
- 22. 模組化 MODULAR CSS
- 25. 兩大原則 • Separate Structure and Skin ·•結構與外觀分離 • Separate Container and Content ·•容器與內容分離
- 28. Media object
- 29. <div class="media"> <div class="media-‐img"> <img src="http://placehold.it/80x80" alt=""> </div> <div class="media-‐body"> <p>...</p> </div> </div>
- 30. <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>
- 31. <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>
- 34. SMACSS • Categorization ·•將結構分類 • Naming rules ·•命名規則 • Decoupling CSS from HTML ·•CSS 與 HTML 分離
- 35. SMACSS Categories • Base • Layout • Module • State • Theme
- 36. SMACSS - Base • CSS Reset • CSS Normalize • There should be no need to use !important in a Base style.
- 42. SMACSS - Module http://smacss.com/book/type-module • ⾴頁⾯面上可單獨存在並且可重複使⽤用的元件 • 定義 Module 時應避免使⽤用 id 或標記名稱 做選擇器 • ⼦子模組以原模組名稱加 dash (-) 作為名稱 如: .mod-‐header , .mod-‐body
- 45. SMACSS - State
- 46. SMACSS - State http://smacss.com/book/type-module • 與 Layout, Module 搭配 • 表⽰示 Layout 或 Module 的狀態變化 • 由 class 定義 • 命名規則是 .is-* 開頭
- 48. <div class="media is-‐box-‐shadow”> <div class="media-‐img"> <img src="http://placehold.it/80x80" alt=""> </div> <div class="media-‐body"> <p>...</p> </div> </div> module class state sub module sub module
- 49. SMACSS - Theme • 定義網站主視覺。 • 類似 Layout，但影響的是網站整體視覺 的變化。 • class 名稱通常以 .theme-* 做開頭
- 51. • Use class over ID. • Use child selector. ( .menu > li > a ) • Apply a class when the HTML won’t be predictable.
- 56. DECOUPLING CSS FROM HTML CSS 與 HTML 分離
- 57. <div class="media"> <img src="http://placehold.it/80x80" alt=""> <div>...</div> </div> ! <div class="media"> <img src="http://placehold.it/80x80" alt=""> <p>...</p> </div>
- 58. ! .media p, .media div, .media …… { ... } !
- 59. ! .media p, .media div, .media ul { ... } ! .media-‐body { ... }
- 60. <div class="media is-‐box-‐shadow”> <div class="media-‐img"> <img src="http://placehold.it/80x80" alt=""> </div> <div class="media-‐body"> <p>...</p> </div> </div> module class state sub module sub module
- 62. http://bem.info/
- 63. BEM - Block • 在⾴頁⾯面上獨⽴立存在並可重複使⽤用的元件 • 如同 SMACSS 的 Module, Layout • 每個 Block 都是獨⽴立存在的
- 66. BEM - CSS 命名原則 (Block) .button .text-‐field .heading .menu .b-‐button .b-‐text-‐field .b-‐heading .b-‐menu ( prefix ⾮非必要)
- 67. BEM - Element • 為 Block 的⼀一部份 (⼦子組件) • 無法獨⽴立於 Block 之外 • 有些 Block 可能沒有 Element
- 69. BEM - CSS 命名原則 (Element) .button__icon .text-‐field__label .heading__title .menu__item 以 Block 名稱加上兩個底線 _ _ 作為 prefix
- 70. BEM - Modifier • ⽤用來定義 Block 或 Element 的狀態或屬性 • 類似 SMACSS 的 State • 同⼀一個 Block 或 Element 可以允許多組 modifier 同時存在
- 72. BEM - CSS 命名原則 (Modifier) .button_active .text-‐field_editable .heading_align_top .menu__item_promo 以 Block 或 Element名稱加上⼀一個底線 _作為 prefix
- 73. <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> Block Modifier Element Element
- 74. MindBEMding • 改良版 BEM，由 Nicolas Gallagher 提出 http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/ .block { ... } .block-‐-‐modifier { ... } .block__element { ... } .block__element-‐-‐modifier { ... }
- 75. 良好的 CSS 架構 • 預測 - Predictable • 複⽤用 - Reusable • 維護 - Maintainable • 延展 - Scalable http://philipwalton.com/articles/css-architecture/
- 76. 取其精華，去其糟粕
- 77. THANKS Kuro Hsu kurotanshi [at] gmail.com http://kuro.tw http://facebook.com/kurotanshi