CSS Architecture with OOCSS, SMACSS, BEM

Slide about Modern CSS Architecture.
with OOCSS, SMACSS, BEM and Preprocessors.

Transcript

1. CSS
   Architecture
   jsCafe
   2014-03-09
   Katsunori Tanaka
   with OOCSS,SMACSS,BEM
   

   View Slide

2. OUTLINE
   1. CSS Architecture
   2. CSS Methodology
   3. CSS Preprocessor
   4. Semantics
   5. Summary
   

   View Slide

3. 1. CSS Architecture
   

   View Slide

4. What?
   CSS Architecture
   

   View Slide

5. “ίϯϐϡʔλʢಛʹϋʔυ΢ΣΞʣ
   ʹ͓͚Δجຊઃܭ΍ઃܭࢥ૝ͳͲͷ
   جຊઃܭ֓೦Λҙຯ͢Δɻ”
   https://ja.wikipedia.org/wiki/ίϯϐϡʔλɾΞʔΩςΫνϟ
   -wikipedia
   

   View Slide

6. Why?
   CSS Architecture
   

   View Slide

7. “CSS is simple... It’s simple to understand.
   But CSS is not simple to use or maintain.”
   ʮCSS͸୯७Ͱཧղ͠΍͍͕͢ɺ࢖ͬͨΓϝϯς
   ͨ͠Γ͢Δͷ͸γϯϓϧͰ͸ͳ͍ɻʯ
   http://chriseppstein.github.io/blog/2009/09/20/why-stylesheet-abstraction-matters/
   -Chris Eppstein
   

   View Slide

8. “We have been doing it all wrong....
   Our (CSS) best practices are killing us”
   ʮCSSͷϕετϓϥΫςΟεʹΑͬͯࢲୡ͸μϝ
   ʹ͞Ε͍ͯΔɻʯ
   http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/
   -Nicole Sullivan
   

   View Slide

9. Three Best Practice
   Myths
   ❖ Don’t add any extra elements
   ❖ Don’t add classes
   ❖ Use descendent selectors exclusively
   http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/
   

   View Slide

10. “CODE IS TOO FRAGILE.”
    http://www.stubbornella.org/content/2009/02/12/css-doesn’t-suck-you’re-just-doing-it-wrong/
    -Nicole Sullivan
    ʮίʔυʢ஫ɿ͜͜Ͱ͸CSSʣ΋Ζ͗͢ʯ
    

    View Slide

11. CSS Architecture
    http://philipwalton.com/articles/css-architecture/
    

    View Slide

12. The Goals of Good
    CSS Architecture
    ❖ Predictable
    ❖ Reusable
    ❖ Maintainable
    ❖ Scalable
    http://philipwalton.com/articles/css-architecture/
    

    View Slide

13. “CSS isn't just visual design.
    Don't throw out programming best practices
    just because you're writing CSS.
    Concepts like OOP, DRY, the open/closed principle,
    separation of concerns, etc. still apply to CSS.”
    ʮΦϒδΣΫτࢤ޲ɺDRYɺ։์/ด࠯ݪଇɺؔ
    ৺ͷ෼཭ͳͲͷ֓೦͸ɺCSSʹ΋ͳ͓ద༻͞Ε
    Δɻʯ
    http://philipwalton.com/articles/css-architecture/
    

    View Slide

14. 2. CSS Methodology
    

    View Slide

15. CSS Methodology
    ✤ OOCSS
    ✤ SMACSS
    ✤ BEM
    

    View Slide

16. Object
    Oriented
    CSS
    

    View Slide

17. OOCSS Nicole Sullivan
    https://github.com/stubbornella/oocss/wiki
    

    View Slide

18. Two Main Principles
    ✤ Separate Structure and Skin
    ✤ Separete Container and Content
    

    View Slide

19. “abstract the structure of the block from
    skin which is being applied.
    Class can be extended by adding
    additional classes to the block element.”
    ʮεΩϯ͔ΒϒϩοΫߏ଄Λநग़͢Δɻ
    ϒϩοΫཁૉ΁ผͷΫϥεΛ෇͚Ճ͑ΔࣄͰ
    Ϋϥε͸֦ுͰ͖Δɻʯ
    Separate Structure and Skin
    

    View Slide

20. “break the dependency between the
    container module and the content objects
    it contains.”
    ʮ ίϯςφʔϞδϡʔϧͱͦͷத਎Ͱ͋Δίϯ
    ςϯπͱͷґଘؔ܎Λஅͪ੾Δʯ
    Separate Container and Content
    

    View Slide

21. EXMAPLE
    MEDIA OBJECT
    

    View Slide

22. ςΩετ
    
    
    
    
    
    Lorem Ipsum is simply dummy text of the
    printing and typesetting industry.
    
    
    

    View Slide

23. .media-shadow {
    box-shadow: 0 1px 5px rgba(0,0,0,0.75);
    }
    .media {
    overflow: hidden;
    _overflow: visible;
    zoom: 1;
    }
    .media-img {
    float: left;
    margin-right: 10px;
    }
    .media-img > img {
    display: block;
    margin: 10px;
    }
    .media-body {
    overflow: hidden;
    }
    

    View Slide

24. ςΩετ
    
    
    
    
    
    Lorem Ipsum is simply dummy text of the
    printing and typesetting industry.
    
    
    media-shadow
    

    View Slide

25. Sub Class
    (descendent)
    Sub Class
    (descendent)
    ςΩετ
    
    
    
    
    
    Lorem Ipsum is simply dummy text of the
    printing and typesetting industry.
    
    
    Base Class
    Sub Class
    (modifier)
    

    View Slide

26. Three Best Practice
    Myths
    ❖ Don’t add any extra elements
    ❖ Don’t add classes
    ❖ Use descendent selectors exclusively
    http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/
    

    View Slide

27. ❖ Add classes
    ❖ Don’t use descendent selectors
    Two Practices
    OOCSS
    

    View Slide

28. Scalable &
    Modular
    Architecture for
    CSS
    SMACSS
    

    View Slide

29. SMACSS Jonathan Snook
    http://smacss.com
    

    View Slide

30. Three Main Principles
    ✤ Categorizing CSS Rules
    ✤ Naming Rules
    ✤ Minimizing the Depth of Applicability
    

    View Slide

31. Five Types of Categories
    1. Base
    2. Layout
    3. Module
    4. State
    5. Theme
    

    View Slide

32. Base Rules
    http://yuilibrary.com/yui/docs/cssreset/
    http://necolas.github.io/normalize.css/
    ❖ɹϕʔεͱͳΔϧʔϧηοτΛఆٛɻ
    ❖ɹλΠϓηϨΫλΛ༻͍Δɻ
    ❖ɹΫϥεηϨΫλɺIDηϨΫλ͸༻͍ͳ͍ɻ
    ❖ɹCSS Reset
    ❖ɹNormalize CSS
    

    View Slide

33. Layout Rules
    ( Major Components)
    ❖ɹϖʔδͷओཁͳϨΠΞ΢τΛ࢘Δίϯϙʔωϯτ
    ❖ɹίϯςφʔͱͯ͠ޙड़͢ΔϞδϡʔϧΛؚΉ
    ❖ɹΫϥεηϨΫλɺIDηϨΫλͰఆٛ
    ❖ɹΫϥεͷ໋໊نଇ͸ɺl-ɹlayout-
    ❖ɹ.l-header
    ❖ɹ.l-sidebar
    ❖ɹ.l-content
    ❖ɹ.l-footer
    http://smacss.com/book/type-layout
    

    View Slide

34. Module Rules
    ( Minor Components)
    ❖ɹઌड़ͷϝδϟʔίϯϙʔωϯτ಺ʹ഑ஔ
    ❖ɹݸʑͷϞδϡʔϧ͸ελϯυΞϩϯͳίϯϙʔωϯτ
    ͱͯ͠ଘࡏͰ͖ΔΑ͏ʹઃܭʢreusableʣ
    ❖ɹΫϥεηϨΫλͷΈͰఆٛɻ
    ❖ɹαϒΫϥε͸ϋΠϑϯͰͭͳ͛Δʢ໋໊نଇʣ
    ❖ɹ.media
    ❖ɹ.media-image
    ❖ɹ.media-image-hoge
    http://smacss.com/book/type-module
    

    View Slide

35. Sub Class
    (descendent)
    Sub Class
    (descendent)
    ςΩετ
    
    
    
    
    
    Lorem Ipsum is simply dummy text of the
    printing and typesetting industry.
    
    
    Module Class
    Sub Class
    (modifier)
    

    View Slide

36. State Rules
    ❖ɹLayout, Moduleͷ྆ํʹద༻͞ΕΔ
    ❖ɹJavaScriptʹґଘ͢Δ
    ❖ɹaddClass, removeClass, toggleClass
    ❖ɹΫϥεηϨΫλͷΈͰఆٛɻ
    ❖ɹΫϥεͷ໋໊نଇ͸ɺis-
    ❖ɹis-active
    ❖ɹis-tab-active
    ❖ɹis-hidden
    ❖ɹis-media-hidden
    http://smacss.com/book/type-state
    

    View Slide

37. State Class
    (modifier)
    .media {
    overflow: hidden;
    _overflow: visible;
    zoom: 1;
    }
    .media-img {
    float: left;
    margin-right: 10px;
    }
    .media-img > img {
    display: block;
    margin: 10px;
    }
    .media-body {
    overflow: hidden;
    }
    .is-hidden {
    display: none;
    }
    

    View Slide

38. ςΩετ
    
    
    
    
    
    Lorem Ipsum is simply dummy text of the
    printing and typesetting industry.
    
    
    State Class
    (modifier)
    

    View Slide

39. Theme Rules
    ❖ɹϖʔδશମͷςʔϚมߋ༻ͷϧʔϧ
    ❖ɹΫϥεηϨΫλͷΈͰఆٛ
    ❖ɹΫϥεͷ໋໊نଇ͸ɺtheme-
    ❖ɹtheme-a-background
    ❖ɹtheme-a-border
    ❖ɹtheme-b-background
    ❖ɹtheme-b-border
    http://smacss.com/book/type-theme
    

    View Slide

40. Minimizing the Depth of Applicability
    ❖ɹదԠੑͷਂ౓Λ࠷খݶʹͱͲΊΔ
    ❖ɹਂ౓ͷਂ͍ࢠଙηϨΫλ͸࢖༻͠ͳ͍
    ❖ɹίϯςϯπґଘΛ๷ࢭ͢Δҝ
    ❖ɹϞδϡʔϧ಺Ͱ͸ࢠηϨΫλʹͱͲΊΔ
    ❖ɹཧ૝͸ࢠηϨΫλͷ୅ΘΓʹαϒΫϥεͰఆٛ
    http://smacss.com/book/applicability
    

    View Slide

41. Child
    Selector
    .media {
    overflow: hidden;
    _overflow: visible;
    zoom: 1;
    }
    .media-img {
    float: left;
    margin-right: 10px;
    }
    .media-img > img {
    display: block;
    margin: 10px;
    }
    .media-body {
    overflow: hidden;
    }
    .is-hidden {
    display: none;
    }
    

    View Slide

42. ςΩετ
    
    
    
    
    
    Lorem Ipsum is simply dummy text of the
    printing and typesetting industry.
    
    
    .media-img > img
    

    View Slide

43. Two core goals of SMACSS
    1. HTMLͱίϯςϯπͷηϚϯςΟοΫͳՁ஋Λ
    ޲্͢Δ͜ͱʢద੾ͳ໋໊نଇʹج͍ͮͨΫϥε
    ໊ʹΑΔίϯςϯπͷৄࡉઆ໌ɻʣ
    2. ಛఆͷHTMLߏ଄΁ͷґଘΛ௿ݮ͢Δ͜ͱ
    http://smacss.com/book/html5
    

    View Slide

44. Block
    Element
    Modifier
    BEM
    

    View Slide

45. BEM Yandex
    http://bem.info/
    

    View Slide

46. BEM stands for
    ✤ Block
    ✤ Element
    ✤ Modifier
    http://bem.info/method/definitions/
    

    View Slide

47. Block
    ❖ɹίϯςϯπ͔Βಠཱͨ͠ଘࡏ
    ❖ɹϖʔδ΍ΞϓϦέʔγϣϯΛߏ੒͍ͯ͠Δ
    ʮϨΰϒϩοΫʯͷΑ͏ͳ໾ׂ
    ❖ɹΫϥεηϨΫλͷΈͰఆٛɻ
    ❖ɹSMACSSʹ͓͚ΔModule Class
    http://bem.info/method/definitions/
    

    View Slide

48. View Slide

49. View Slide

50. Element
    ❖ɹϒϩοΫΛߏ੒͢ΔҰ෦෼
    ❖ɹΤϨϝϯτ͕ଐ͢ΔϒϩοΫͷதͰͷΈҙຯ
    Λͳ͢ɺϒϩοΫʹґଘͨ͠ଘࡏ
    ❖ɹΫϥεηϨΫλͷΈͰఆٛɻ
    ❖ɹαϒΫϥε͸ΞϯμʔείΞೋͭͰͭͳ͛Δ
    ❖ɹ.block__element
    ❖ɹSMACSSʹ͓͚ΔSub Class (descendent)
    http://bem.info/method/definitions/
    

    View Slide

51. View Slide

52. Modifier
    ❖ɹBlock, Elementͷݟӫ͑΍ৼ෣͍Λࢦఆ
    ❖ɹΫϥεηϨΫλͷΈͰఆٛɻ
    ❖ɹαϒΫϥε͸ΞϯμʔείΞҰͭͰͭͳ͛Δ
    ❖ɹ.block_modifier
    ❖ɹ.block__element_modifier
    ❖ɹSMACSSʹ͓͚ΔSub Class (Modifier), State Rule
    http://bem.info/method/definitions/
    

    View Slide

53. Element
    Element
    ςΩετ
    
    
    
    
    
    Lorem Ipsum is simply dummy text of the
    printing and typesetting industry.
    
    
    Block Modifier
    

    View Slide

54. .media {
    overflow: hidden;
    _overflow: visible;
    zoom: 1;
    }
    .media__img {
    float: left;
    margin-right: 10px;
    }
    .media__img > img {
    display: block;
    margin: 10px;
    }
    .media__body {
    overflow: hidden;
    }
    .media_shadow {
    box-shadow: 0 1px 5px rgba(0,0,0,0.75);
    }
    

    View Slide

55. MindBEMDing
    http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
    

    View Slide

56. MindBEMDing
    http://nicolasgallagher.com/about-html-semantics-front-end-architecture/
    ❖ɹBEM໋໊نଇͷվྑ൛(by Nicolas Gallagher)
    ❖ɹμϒϧηύϨʔλ
    ❖ .block__element
    ❖ .block−−modifier
    ❖ .block__element−−modifier
    

    View Slide

57. Element
    Element
    ςΩετ
    
    
    
    
    
    Lorem Ipsum is simply dummy text of the
    printing and typesetting industry.
    
    
    Block Modifier
    

    View Slide

58. 3. CSS Preprocessor
    for OOCSS
    

    View Slide

59. CSS Preprocessor
    for OOCSS
    ✤ “&” Combinator (LESS & SASS3.3~)
    ✤ Placeholder Selector (SASS)
    ✤ Combine multiples files
    

    View Slide

60. ςΩετ
    രഁ
    ΍ΊΔ
    

    View Slide

61. 3.3~
    // btn component
    .btn {
    border: 1px solid #000;
    padding: 10px 20px;
    color: #000;
    border-radius: 8px;
    &--red {
    background-color: red;
    }
    &--blue {
    background-color: blue;
    }
    }
    

    View Slide

62. .btn {
    border: 1px solid #000;
    padding: 10px 20px;
    color: #000;
    border-radius: 8px;
    }
    .btn--red {
    background-color: red;
    }
    .btn--blue {
    background-color: blue;
    }
    

    View Slide

63. Single
    Class
    OOSCSS
    

    View Slide

64. Multiple
    Classes
    Multiple
    Classes
    ςΩετ
    രഁ
    ΍ΊΔ
    

    View Slide

65. Single
    Classes
    Single Class
    ςΩετ
    രഁ
    ΍ΊΔ
    

    View Slide

66. %btn {
    border: 1px solid #000;
    padding: 10px 20px;
    color: #000;
    border-radius: 8px;
    }
    %btn--red {
    background-color: red;
    }
    %btn--blue {
    background-color: blue;
    }
    .fire {
    @extend %btn;
    @extend %btn--red;
    }
    .stop {
    @extend %btn;
    @extend %btn--blue;
    }
    

    View Slide

67. .fire, .stop {
    border: 1px solid #000;
    padding: 10px 20px;
    color: #000;
    border-radius: 8px;
    }
    .fire {
    background-color: red;
    }
    .stop {
    background-color: blue;
    }
    

    View Slide

68. Placeholder Selector
    ✤ Clean markup - single class
    ✤ Semantic class naming
    ✤ Avoid using too much @extend
    

    View Slide

69. 4. Semantics
    

    View Slide

70. About HTML semantics and
    front-end architecture
    http://nicolasgallagher.com/about-html-semantics-front-end-architecture/
    

    View Slide

71. “ ... not all semantics need to be content-
    derived ”
    ʮશͯͷηϚϯςΟΫε͕ίϯςϯπ༝དྷͰ͋
    Δඞཁ͸ͳ͍ʯ
    http://nicolasgallagher.com/about-html-semantics-front-end-architecture/
    

    View Slide

72. “ Content-layer semantics are already
    served by HTML elements and other
    attributes. ”
    ʮίϯςϯπϨΠϠʔͷηϚϯςΟΫε͸ɺ
    HTMLཁૉͱͦͷଞଐੑʹΑͬͯɺ͢Ͱʹ༩͑
    ΒΕ͍ͯΔʯ
    http://nicolasgallagher.com/about-html-semantics-front-end-architecture/
    

    View Slide

73. “ Class names impart little or no useful
    semantic information to machines or
    human visitors... ”
    ʮΫϥε໊͸ɺαΠτӾཡऀ΍Ϛγʔϯʹͱͬ
    ͯຆͲӨڹΛ༩͑Δ͜ͱ͸ͳ͘ɺ༗ӹͳ৘ใΛ
    ΋ͨΒ͢͜ͱ͸ͳ͍ʯ
    http://nicolasgallagher.com/about-html-semantics-front-end-architecture/
    

    View Slide

74. “ The primary purpose of a class name is
    to be a hook for CSS and JavaScript. ”
    ʮΫϥε໊ͷୈҰͷ໨త͸ɺCSS΍JavaScriptͷ
    ϑοΫʹͳΔ͜ͱɻʯ
    http://nicolasgallagher.com/about-html-semantics-front-end-architecture/
    

    View Slide

75. “ Class names should communicate useful
    information to developers. ”
    http://nicolasgallagher.com/about-html-semantics-front-end-architecture/
    ʮΫϥε໊͸։ൃऀ΁༗ӹͳ৘ใΛ఻ୡ͢΂͖ɻʯ
    

    View Slide

76. “ A flexible and reusable component is one
    which neither relies on existing within a
    certain part of the DOM tree, nor requires
    the use of specific element types. ”
    http://nicolasgallagher.com/about-html-semantics-front-end-architecture/
    ʮϑϨΩγϒϧͰ࠷ར༻Մೳͳίϯϙʔωϯτ
    ͸ɺDOMπϦʔͷ͋Δ෦෼ʹґଘ͢Δ͜ͱ΋ɺ
    ಛఆͷཁૉλΠϓΛ࢖༻ͨ͠Γ΋͠ͳ͍ɻʯ
    

    View Slide

77. CSS Class
    Naming Convention
    ✤ Semantic ?
    ✤ presentational / behavioural ?
    

    View Slide

78. 5. Summary
    

    View Slide

79. The Goals of Good
    CSS Architecture
    ❖ Predictable
    ❖ Reusable
    ❖ Maintainable
    ❖ Scalable
    http://philipwalton.com/articles/css-architecture/
    

    View Slide

80. Do you need a CSS Architecture &
    Methodology like OOCSS ?
    ❖ How many developers ?
    ❖ Reuse ?
    ❖ Maintainance ?
    ❖ Scale ?
    http://philipwalton.com/articles/css-architecture/
    

    View Slide

81. Bootstrap
    http://getbootstrap.com/
    

    View Slide

82. Topcoat
    http://topcoat.io/
    

    View Slide

83. Thank you
    so much
    jsCafe
    2014-03-09
    Katsunori Tanaka
    ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide