Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS

我們都同意，其實 CSS 並不難。但是很快的你發現，當專案開始變大，你的 CSS 變得越來越難維護 — tag、id 還有 class 交錯使用，選擇器越組越長，這段 CSS 看起來好眼熟？

為什麼你需要 Object Oriented CSS Methodology？什麼是 OOCSS、SMACSS 還有 BEM (甚至是最新的 AMCSS)？如何寫出具有可預測性、可重複使用且易於維護的架構？

Transcript

1. Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS Benson Lu
2. Benson Lu Front-End Engineer Wantrepreneur
3. – http://cssguidelin.es/ Harry Roberts CSS is not a pretty language. While it is simple to learn and get started with, it soon becomes problematic at any reasonable scale.
4. http://philipwalton.com/articles/css-architecture/ http://philipwalton.com/articles/css-architecture/ <div class=”widget”> Featured Items </div> #sidebar .widget { background: yellow; border: 1px solid black; color: black; width: 50%; padding: 7px; } COMMON MISTAKES
5. http://philipwalton.com/articles/css-architecture/ http://philipwalton.com/articles/css-architecture/ <div class=”widget”> Featured Items </div> <div id=”sidebar”> <div class=”widget”> Featured Items </div> </div> #sidebar .widget { background: yellow; border: 1px solid black; color: black; width: 50%; padding: 7px; } COMMON MISTAKES
6. COMMON MISTAKES http://philipwalton.com/articles/css-architecture/ http://philipwalton.com/articles/css-architecture/ #sidebar .widget { background: yellow; border: 1px solid black; color: black; width: 50%; padding: 7px; } #sidebar .widget { width: 200px; } <div class=”widget”> Featured Items </div> <div id=”sidebar”> <div class=”widget”> Featured Items </div> </div>
7. COMMON MISTAKES http://philipwalton.com/articles/css-architecture/ http://philipwalton.com/articles/css-architecture/ <div class=”widget”> Featured Items </div> <div id=”sidebar”> <div class=”widget”> Featured Items </div> </div> .widget { background: yellow; border: 1px solid black; color: black; width: 50%; padding: 7px; } #sidebar .widget { width: 200px; } home
8. COMMON MISTAKES http://philipwalton.com/articles/css-architecture/ http://philipwalton.com/articles/css-architecture/ <div class=”widget”> Featured Items </div> <div id=”sidebar”> <div class=”widget”> Featured Items </div> </div> .widget { background: yellow; border: 1px solid black; color: black; width: 50%; padding: 7px; } #sidebar .widget { width: 200px; } body.homepage .widget { backgorund: white; } home
9. COMMON MISTAKES • Not Reusable 不能重複使⽤用 • Not Scalable 不能擴充
10. COMMON MISTAKES • Not Reusable 不能重複使⽤用 • Not Scalable 不能擴充 • Redesign?
11. COMMON MISTAKES #main-nav ul li ul li div .widget {} #content atticle h1:first-child {} #sidebar > div > h3 + p {} • Overly Complicated Selectors
12. COMMON MISTAKES • Overly Complicated Selectors • Overly Generic Class Names • Making a Rule Do Too Much
13. CSS Architecture
14. - http://philipwalton.com/articles/css-architecture/ CSS isn’t just visual design. OOP, Modular, DRY, open/closed principle etc. still apply to CSS
15. 蛤，可是物件導向我不會
16. - 世間情 三⽴立台灣台
17. Good CSS Architecture • 預測 - Predictable • 複⽤用 - Reusable • 維護 - Maintainable • 延展 - Scalable http://philipwalton.com/articles/css-architecture/ http://philipwalton.com/articles/css-architecture/
18. CSS Methodology
19. CSS Methodology • OOCSS • SMACSS • BEM • AMCSS http://philipwalton.com/articles/css-architecture/ http://philipwalton.com/articles/css-architecture/
20. OBJECT Oriented CSS - Nicole Sullivan 2009
21. Principles • Separate Structure and Skin • Separate Container and Content
22. Principles • Separate Structure and Skin
23. https://dribbble.com/shots/989864-Flat-Roman-Typeface-Ui by Cosmic Capitanu Media Object
24. Media Object
25. Media Object Base Class Sub Class (modifier) Descendent Content Descendent Content
26. Principles • Separate Container and Content • break the dependency between the container module and the content objects it contains.
27. Some Guidelines for OOCSS • Avoid the descendent selector (i.e. don’t use .sidebar h3) • Avoid IDs as styling hooks • Avoid attaching classes to elements in your stylesheet (i.e. don’t do div.header or h1.title) • Except in some rare cases, avoid using ! important
28. SCALABLE MODULAR ARCHITECTURE CSS - Jonathan Snook
29. PRinciples • Categorizing CSS Rules • 將 CSS 結構分類 • Naming Rules • 命名規則 • Minimizing the Depth of Applicability • 減少 CSS 與 HTML 的相依程度
30. Five Types of Categories • Base • Layout • Module • State • Theme
31. BASE • applied to • element • descendent selector • child selector • pseudo-classes • should be no !important • CSS Resets
32. LAYOUT
33. LAYOUT
34. LAYOUT <style> #header {…} .l-main {…} .l-secondary {…} .l-featured {…} .l-featured > li {…} </style> <div id=”header”></div> <div class=”l-main”></div> <div class=”l-secondary”></div> <div class=”l-featured”></div>
35. MODULE • Modules 存在於 Layout components 下. • Modules 也可存在於 Modules 下. • 每個 Module 應該被設計成獨⽴立存在的 • 避免使⽤用 IDs 還有 element 當作 selector
36. MODULE
37. STATE • 可以作⽤用於 Layout 和 Module 上 • 表⽰示狀態的變化 • 使⽤用 .is-* 開頭的 class 來定義
38. BLOCK ELEMENT MODULE - Yandex http://bem.info
39. BLOCK • 在⾴頁⾯面上獨⽴立存在, i.e. 可以在⾴頁⾯面之中任意更動 位置 • 是 Web Application 的 “building block” • 可重複使⽤用 • Block 可以是 簡單⽽而單⼀一的 或是含有其他的 blocks
40. BLOCK
41. BLOCK
42. BLOCK
43. ELEMENT • An internal part of BLOCK • 只能存在於 BLOCK 內，沒有獨⽴立出來的意義 • BLOCK 不⼀一定要包含 ELEMENT(S)
44. ELEMENT • 在 BLOCK 名稱後加上兩個底線 __ 作為 prefix
45. MODIFIER • 定義 BLOCK 或 ELEMENT 的狀態或屬性 • 多組 MODIFIERS 可以共同作⽤用於⼀一個 BLOCK/ ELEMENT 上
46. MODIFIER • 在 MODIFIER 之前加上兩個 —(dash) 當作 prefix - MindBEMding - http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
47. QUICK SUMMARY • .block {…} • .block--modifier {…} • .block__element {…} • .block__element—modifier {…}
48. BUT SERIOUSLY? —__-_—_— - _— ___—__
49. ATTRIBUTE METHOD CSS Glen Maddern, 2014 http://glenmaddern.com/articles/introducing-am-css
50. Why CLASSES? • 3.2.5.7 The class attribute • https://html.spec.whatwg.org/multipage/dom.html#classes • The attribute, if specified, must have a value that is a set of space-separated tokens representing the various classes that the element belongs to. • There are no additional restrictions on the tokens authors can use in the class attribute, but authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content.
51. Why CLASSES? • Therefore, • BEM • .primary-nav__sub-nav—current • Utilities • .u-textTruncate • left • clearfix • Javascript hook • .js-whatevs GLOBAL NAMESPACE
52. ~= Attribute is within Space Separated List <div class='a b c'> .a { ... } .b { ... } .c { ... } [class~='a'] { ... } [class~='b'] { ... } [class~='c'] { ... }
53. <div class=‘row’> <div class=‘column-12’>Full</div> </div> <div class=‘row’> <div class=‘column-4’>Thirds</div> <div class=‘column-4’>Thirds</div> <div class=‘column-4’>Thirds</div> </div> .row { /* max-width, clearfixes */ } .column-1 { /* 1/12th width, floated */ } .column-2 { /* 1/6th width, floated */ } .column-3 { /* 1/4th width, floated */ } .column-4 { /* 1/3th width, floated */ } .column-5 { /* 5/12th width, floated */ } /* etc */ .column-12 { /* 100% width, floated */ } Normally we do
54. <div am-row> <div am-column=‘12’>Full</div> </div> <div am-row> <div am-column=‘4’>Thirds</div> <div am-column=‘4’>Thirds</div> <div am-column=‘4’>Thirds</div> </div> [am-row] { /* max-width, clearfixes */ } [am-column~=“1”] { /* 1/12th width, floated */ } [am-column~=“2”] { /* 1/6th width, floated */ } [am-column~=“3”] { /* 1/4th width, floated */ } [am-column~=“4”] { /* 1/3th width, floated */ } [am-column~=“5”] { /* 5/12th width, floated */ } [am-column~=“12”] { /* 100% width, floated */ } AMCSS
55. <div am-row> <div am-column>Full</div> </div> <div am-row> <div am-column=‘1/3’>Thirds</div> <div am-column=‘1/3’>Thirds</div> <div am-column=‘1/3’>Thirds</div> </div> [am-row] { /* max-width, clearfixes */ } [am-column] { /* 100% width, floated */ } [am-column~=“1/12”] { /* 1/12th width, floated */ } [am-column~=“1/6”] { /* 1/6th width, floated */ } [am-column~=“1/4”] { /* 1/4th width, floated */ } [am-column~=“1/3”] { /* 1/3th width, floated */ } [am-column~=“5/12”] { /* 5/12th width, floated */ } AMCSS
56. Styling both attributes and values • attribute 可以⽽而且應該要被 styled • 屬性的 Value 可以改變與繼承 Base styles(也就是 attribute) • namespace 的概念
57. Zero-class approach • attribute 可以⽽而且應該要被 styled • 屬性的 Value 可以改變與繼承 Base styles(也就是 attribute) • namespace 的概念
58. zero-class approach to BEM modifiers header > nav [am-Button] { /* contextual overrides */ }
59. Good CSS Architecture • 預測 - Predictable • 複⽤用 - Reusable • 維護 - Maintainable • 延展 - Scalable http://philipwalton.com/articles/css-architecture/ http://philipwalton.com/articles/css-architecture/
60. Thank you! Benson llwbenson@gmail.com