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
2. OUTLINE 1. CSS Architecture 2. CSS Methodology 3. CSS Preprocessor 4. Semantics 5. Summary
3. 1. CSS Architecture
4. What? CSS Architecture
5. “ίϯϐϡʔλʢಛʹϋʔυ΢ΣΞʣ ʹ͓͚Δجຊઃܭ΍ઃܭࢥ૝ͳͲͷ جຊઃܭ֓೦Λҙຯ͢Δɻ” https://ja.wikipedia.org/wiki/ίϯϐϡʔλɾΞʔΩςΫνϟ -wikipedia
6. Why? CSS Architecture
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
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
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/
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ʣ΋Ζ͗͢ʯ
11. CSS Architecture http://philipwalton.com/articles/css-architecture/
12. The Goals of Good CSS Architecture ❖ Predictable ❖ Reusable ❖ Maintainable ❖ Scalable http://philipwalton.com/articles/css-architecture/
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/
14. 2. CSS Methodology
15. CSS Methodology ✤ OOCSS ✤ SMACSS ✤ BEM
16. Object Oriented CSS
17. OOCSS Nicole Sullivan https://github.com/stubbornella/oocss/wiki
18. Two Main Principles ✤ Separate Structure and Skin ✤ Separete Container and Content
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
20. “break the dependency between the container module and the content objects it contains.” ʮ ίϯςφʔϞδϡʔϧͱͦͷத਎Ͱ͋Δίϯ ςϯπͱͷґଘؔ܎Λஅͪ੾Δʯ Separate Container and Content
21. EXMAPLE MEDIA OBJECT
22. ςΩετ <div class="media"> <div class="media-img"> <img src="http://lorempixel.com/100/100/" /> </div> <div class="media-body"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </div>
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; }
24. ςΩετ <div class="media "> <div class="media-img"> <img src="http://lorempixel.com/100/100/" /> </div> <div class="media-body"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </div> media-shadow
25. Sub Class (descendent) Sub Class (descendent) ςΩετ <div class="media media-shadow"> <div class="media-img"> <img src="http://lorempixel.com/100/100/" /> </div> <div class="media-body"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </div> Base Class Sub Class (modifier)
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/
27. ❖ Add classes ❖ Don’t use descendent selectors Two Practices OOCSS
28. Scalable & Modular Architecture for CSS SMACSS
29. SMACSS Jonathan Snook http://smacss.com
30. Three Main Principles ✤ Categorizing CSS Rules ✤ Naming Rules ✤ Minimizing the Depth of Applicability
31. Five Types of Categories 1. Base 2. Layout 3. Module 4. State 5. Theme
32. Base Rules http://yuilibrary.com/yui/docs/cssreset/ http://necolas.github.io/normalize.css/ ❖ɹϕʔεͱͳΔϧʔϧηοτΛఆٛɻ ❖ɹλΠϓηϨΫλΛ༻͍Δɻ ❖ɹΫϥεηϨΫλɺIDηϨΫλ͸༻͍ͳ͍ɻ ❖ɹCSS Reset ❖ɹNormalize CSS
33. Layout Rules ( Major Components) ❖ɹϖʔδͷओཁͳϨΠΞ΢τΛ࢘Δίϯϙʔωϯτ ❖ɹίϯςφʔͱͯ͠ޙड़͢ΔϞδϡʔϧΛؚΉ ❖ɹΫϥεηϨΫλɺIDηϨΫλͰఆٛ ❖ɹΫϥεͷ໋໊نଇ͸ɺl-ɹlayout- ❖ɹ.l-header ❖ɹ.l-sidebar ❖ɹ.l-content ❖ɹ.l-footer http://smacss.com/book/type-layout
34. Module Rules ( Minor Components) ❖ɹઌड़ͷϝδϟʔίϯϙʔωϯτ಺ʹ഑ஔ ❖ɹݸʑͷϞδϡʔϧ͸ελϯυΞϩϯͳίϯϙʔωϯτ ͱͯ͠ଘࡏͰ͖ΔΑ͏ʹઃܭʢreusableʣ ❖ɹΫϥεηϨΫλͷΈͰఆٛɻ ❖ɹαϒΫϥε͸ϋΠϑϯͰͭͳ͛Δʢ໋໊نଇʣ ❖ɹ.media ❖ɹ.media-image ❖ɹ.media-image-hoge http://smacss.com/book/type-module
35. Sub Class (descendent) Sub Class (descendent) ςΩετ <div class="media media-shadow"> <div class="media-img"> <img src="http://lorempixel.com/100/100/" /> </div> <div class="media-body"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </div> Module Class Sub Class (modifier)
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
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; }
38. ςΩετ <div class="media media-shadow is-hidden"> <div class="media-img"> <img src="http://lorempixel.com/100/100/" /> </div> <div class="media-body"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </div> State Class (modifier)
39. Theme Rules ❖ɹϖʔδશମͷςʔϚมߋ༻ͷϧʔϧ ❖ɹΫϥεηϨΫλͷΈͰఆٛ ❖ɹΫϥεͷ໋໊نଇ͸ɺtheme- ❖ɹtheme-a-background ❖ɹtheme-a-border ❖ɹtheme-b-background ❖ɹtheme-b-border http://smacss.com/book/type-theme
40. Minimizing the Depth of Applicability ❖ɹదԠੑͷਂ౓Λ࠷খݶʹͱͲΊΔ ❖ɹਂ౓ͷਂ͍ࢠଙηϨΫλ͸࢖༻͠ͳ͍ ❖ɹίϯςϯπґଘΛ๷ࢭ͢Δҝ ❖ɹϞδϡʔϧ಺Ͱ͸ࢠηϨΫλʹͱͲΊΔ ❖ɹཧ૝͸ࢠηϨΫλͷ୅ΘΓʹαϒΫϥεͰఆٛ http://smacss.com/book/applicability
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; }
42. ςΩετ <div class="media skin-shadow is-hidden"> <div class="media-img"> <img src="http://lorempixel.com/100/100/" /> </div> <div class="media-body"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </div> .media-img > img
43. Two core goals of SMACSS 1. HTMLͱίϯςϯπͷηϚϯςΟοΫͳՁ஋Λ ޲্͢Δ͜ͱʢద੾ͳ໋໊نଇʹج͍ͮͨΫϥε ໊ʹΑΔίϯςϯπͷৄࡉઆ໌ɻʣ 2. ಛఆͷHTMLߏ଄΁ͷґଘΛ௿ݮ͢Δ͜ͱ http://smacss.com/book/html5
44. Block Element Modifier BEM
45. BEM Yandex http://bem.info/
46. BEM stands for ✤ Block ✤ Element ✤ Modifier http://bem.info/method/definitions/
47. Block ❖ɹίϯςϯπ͔Βಠཱͨ͠ଘࡏ ❖ɹϖʔδ΍ΞϓϦέʔγϣϯΛߏ੒͍ͯ͠Δ ʮϨΰϒϩοΫʯͷΑ͏ͳ໾ׂ ❖ɹΫϥεηϨΫλͷΈͰఆٛɻ ❖ɹSMACSSʹ͓͚ΔModule Class http://bem.info/method/definitions/
50. Element ❖ɹϒϩοΫΛߏ੒͢ΔҰ෦෼ ❖ɹΤϨϝϯτ͕ଐ͢ΔϒϩοΫͷதͰͷΈҙຯ Λͳ͢ɺϒϩοΫʹґଘͨ͠ଘࡏ ❖ɹΫϥεηϨΫλͷΈͰఆٛɻ ❖ɹαϒΫϥε͸ΞϯμʔείΞೋͭͰͭͳ͛Δ ❖ɹ.block__element ❖ɹSMACSSʹ͓͚ΔSub Class (descendent) http://bem.info/method/definitions/
52. Modifier ❖ɹBlock, Elementͷݟӫ͑΍ৼ෣͍Λࢦఆ ❖ɹΫϥεηϨΫλͷΈͰఆٛɻ ❖ɹαϒΫϥε͸ΞϯμʔείΞҰͭͰͭͳ͛Δ ❖ɹ.block_modifier ❖ɹ.block__element_modifier ❖ɹSMACSSʹ͓͚ΔSub Class (Modifier), State Rule http://bem.info/method/definitions/
53. Element Element ςΩετ <div class="media media_shadow"> <div class="media__img"> <img src="http://lorempixel.com/100/100/" /> </div> <div class="media__body"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </div> Block Modifier
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); }
55. MindBEMDing http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
56. MindBEMDing http://nicolasgallagher.com/about-html-semantics-front-end-architecture/ ❖ɹBEM໋໊نଇͷվྑ൛(by Nicolas Gallagher) ❖ɹμϒϧηύϨʔλ ❖ .block__element ❖ .block−−modifier ❖ .block__element−−modifier
57. Element Element ςΩετ <div class="media media--shadow"> <div class="media__img"> <img src="http://lorempixel.com/100/100/" /> </div> <div class="media__body"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div> </div> Block Modifier
58. 3. CSS Preprocessor for OOCSS
59. CSS Preprocessor for OOCSS ✤ “&” Combinator (LESS & SASS3.3~) ✤ Placeholder Selector (SASS) ✤ Combine multiples files
60. ςΩετ <a class="btn btn--red" href="#" >രഁ</a> <a class="btn btn--blue" href="#" >΍ΊΔ</a>
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; } }
62. .btn { border: 1px solid #000; padding: 10px 20px; color: #000; border-radius: 8px; } .btn--red { background-color: red; } .btn--blue { background-color: blue; }
63. Single Class OOSCSS
64. Multiple Classes Multiple Classes ςΩετ <a class="btn btn--red" href="#" >രഁ</a> <a class="btn btn--blue" href="#" >΍ΊΔ</a>
65. Single Classes Single Class ςΩετ <a class="fire" href="#" >രഁ</a> <a class="stop" href="#" >΍ΊΔ</a>
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; }
67. .fire, .stop { border: 1px solid #000; padding: 10px 20px; color: #000; border-radius: 8px; } .fire { background-color: red; } .stop { background-color: blue; }
68. Placeholder Selector ✤ Clean markup - single class ✤ Semantic class naming ✤ Avoid using too much @extend
69. 4. Semantics
70. About HTML semantics and front-end architecture http://nicolasgallagher.com/about-html-semantics-front-end-architecture/
71. “ ... not all semantics need to be content- derived ” ʮશͯͷηϚϯςΟΫε͕ίϯςϯπ༝དྷͰ͋ Δඞཁ͸ͳ͍ʯ http://nicolasgallagher.com/about-html-semantics-front-end-architecture/
72. “ Content-layer semantics are already served by HTML elements and other attributes. ” ʮίϯςϯπϨΠϠʔͷηϚϯςΟΫε͸ɺ HTMLཁૉͱͦͷଞଐੑʹΑͬͯɺ͢Ͱʹ༩͑ ΒΕ͍ͯΔʯ http://nicolasgallagher.com/about-html-semantics-front-end-architecture/
73. “ Class names impart little or no useful semantic information to machines or human visitors... ” ʮΫϥε໊͸ɺαΠτӾཡऀ΍Ϛγʔϯʹͱͬ ͯຆͲӨڹΛ༩͑Δ͜ͱ͸ͳ͘ɺ༗ӹͳ৘ใΛ ΋ͨΒ͢͜ͱ͸ͳ͍ʯ http://nicolasgallagher.com/about-html-semantics-front-end-architecture/
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/
75. “ Class names should communicate useful information to developers. ” http://nicolasgallagher.com/about-html-semantics-front-end-architecture/ ʮΫϥε໊͸։ൃऀ΁༗ӹͳ৘ใΛ఻ୡ͢΂͖ɻʯ
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πϦʔͷ͋Δ෦෼ʹґଘ͢Δ͜ͱ΋ɺ ಛఆͷཁૉλΠϓΛ࢖༻ͨ͠Γ΋͠ͳ͍ɻʯ
77. CSS Class Naming Convention ✤ Semantic ? ✤ presentational / behavioural ?
78. 5. Summary
79. The Goals of Good CSS Architecture ❖ Predictable ❖ Reusable ❖ Maintainable ❖ Scalable http://philipwalton.com/articles/css-architecture/
80. Do you need a CSS Architecture & Methodology like OOCSS ? ❖ How many developers ? ❖ Reuse ? ❖ Maintainance ? ❖ Scale ? http://philipwalton.com/articles/css-architecture/
81. Bootstrap http://getbootstrap.com/
82. Topcoat http://topcoat.io/
83. Thank you so much jsCafe 2014-03-09 Katsunori Tanaka ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠