Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS Architecture with OOCSS, SMACSS, BEM

CSS Architecture with OOCSS, SMACSS, BEM

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

8bb7c9b7323d84b9858e67ae9fc854be?s=128

Katsunori Tanaka

March 09, 2014
Tweet

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/

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

    http://bem.info/method/definitions/
  51. None
  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 ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠