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

Introduction to CSS Architecture

Introduction to CSS Architecture

新卒社内勉強会(2015/6/4) の資料です

Masaaki Morishita

June 04, 2015
Tweet

More Decks by Masaaki Morishita

Other Decks in Programming

Transcript

  1. Introduction to CSS Architecture in ৽ଔࣾ಺ษڧձ

  2. ࣗݾ঺հ • Twitter: @morishitter_ • GitHub: morishitter • εϓϥτΡʔϯ: ϥϯΫ20

    • χϯςϯυʔωοτϫʔΫID: CSS0830
  3. ໨࣍ • CSSͷ໰୊఺ • طଘͷCSSઃܭख๏ • CSSઃܭͷຊ࣭

  4. CSSͷ໰୊఺

  5. CSS is γϯϓϧ article h1 { font-size: 20px; padding-bottom: 5px;

    border-bottom: solid 1px #ccc; margin-bottom: 10px; }
  6. γϯϓϧ ≒ ؆୯

  7. article h1 { font-size: 20px; padding-bottom: 5px; border-bottom: solid 1px

    #ccc; margin-bottom: 10px; } article h1 + p.lead { font-size: 14px; color: #ddd; line-height: 1.5; }
  8. article h1 { font-size: 20px; padding-bottom: 5px; border-bottom: solid 1px

    #ccc; margin-bottom: 10px; } article h1 + p.lead { font-size: 14px; color: #ddd; line-height: 1.5; } #header { }
  9. article h1 { font-size: 20px; padding-bottom: 5px; border-bottom: solid 1px

    #ccc; margin-bottom: 10px; } article h1 + p.lead { font-size: 14px; color: #ddd; line-height: 1.5; } #header { } #header > img#logo{ } ul > list.item { } .menu { } .menu .nav { } #sidebar { } #sidebar .widget { }
  10. #header { } #header > img#logo{ } ul > list.item

    { } #menu { } #menu .nav { } #sidebar { } #sidebar .widget { } body { } .container{ } .container > h2.title { } .col-md-5 { } .row .col-md-5 { } .landing > h1 { } .widget .title { } #sidebar > img#logo{ } ul > list#logo { } #article { } #article .title { } footer small { } footer small .info { }
  11. !important;

  12. ϧʔϧηοτͷӨڹൣғ͕ Θ͔Βͳ͘ͳΔ

  13. ؆୯ ≒ յΕ΍͍͢

  14. CSSͷ໰୊఺ʢٕज़తଆ໘ʣ • ߏจ͕ශऑ • ϧʔϧηοτʹείʔϓ͕ͳ͍ • શͯͷϧʔϧηοτ͕άϩʔόϧఆٛ

  15. CSSͷ໰୊఺ʢӡ༻తଆ໘ʣ • σβΠϯ͕มΘΒͳ͍WebαΠτ͸ͳ͍ • ৔౰ͨΓతͳमਖ਼͕܁Γฦ͞ΕΔ

  16. CSSͷ໰୊఺ʢࣾձతଆ໘ʣ • CSSᢞΊΒΕ͗͢ • ϓϩάϥϚʹ͸όΧʹ͞ΕɺσβΠφʔ͕ࡶʹॻ͘ • ยखؒCSS • ίʔυͷైḤͳ؅ཧ

  17. CSS ͸ͨͩWebͷϏδϡΞϧσβΠϯ ΛදݱͰ͖Ε͹͍͍΋ͷͰ͸ͳ͍

  18. WebαΠτ͸ΞʔτͰ͸ͳ͘ ৘ใγεςϜ

  19. CSS ΋ιϑτ΢ΣΞͷҰ෦ͱͯ͠ อक͞ΕΔ΂͖ͩ͠ ϦϑΝΫλϦϯάͷର৅

  20. CSS ͪΌΜͱॻ͜͏ͳ

  21. طଘͷCSSઃܭख๏

  22. طଘͷCSSઃܭख๏ • OOCSS • SMACSS • BEM

  23. OOCSS

  24. OOCSS • Object Oriented CSS (by Nicole Sullivan) • ʮߏ଄ͱݟͨ໨ͷ෼཭ʯ

    • ʮίϯςφͱίϯςϯπͷ෼཭ʯ • CSSઃܭͷϕʔεͱͳΔ֓೦ • ଟ͘ͷCSSϑϨʔϜϫʔΫͰ࠾༻
  25. OOCSS WebϖʔδΛϨΰͷΑ͏ʹߟ͑Δ

  26. OOCSS .btn { property: value; } /* Decoration */ .btn-danger

    { } .btn-success { } /* Layout */ .btn-large { } .btn-small { }
  27. OOCSS <button class="btn btn-success btn-large">Submit</button>

  28. OOCSS <button class="btn btn-success btn-large">Submit</button> <button class="btn btn-danger btn-large">Delete</button>

  29. SMACSS

  30. SMACSS • Scalable and Modular Architecture for CSS • ϕʔε͸OOCSS

    • OOCSS + ໋໊نଇ Έ͍ͨͳ΋ͷ
  31. SMACSS • CSS ͷΧςΰϥΠζ • Base • Layout • Module

    • State • Theme
  32. Base • ཁૉͦͷ΋ͷͷσϑΥϧτͷελΠϧ • CSSϦηοτ͕͜Ε body { background: white; }

    p { margin-bottom: .5rem; }
  33. Layout • ϖʔδΛΤϦΞ͝ͱʹ෼ׂ .l-header { margin-bottom: 20px; } .l-footer {

    border-top: 1px solid gray; } .l-main { float: left; width: 80%; }
  34. Module • ࠶ར༻Մೳͳύʔπ • Module͸Layoutͷதʹ഑ஔ͞ΕΔ • ผͷLayoutͰ΋࠶ར༻Ͱ͖ΔΑ͏ʹ׬શʹ ಠཱ

  35. Module <div class="item"> <h2 class="item-title"></h2> <p class="item-text"></p> <div class="item-image"><img src="..."

    alt=""></div> <div class="item-price"></div> </div>
  36. State • Layout΍Moduleͷಛఆͷঢ়ଶΛද͢ .is-hidden { display: none; } .is-error {

    color: red; }
  37. Theme • ίϯϙʔωϯτͷ૷০ .theme-border { border-color: #ccc; } .theme-background {

    background-color: #eee; }
  38. BEM

  39. BEM • Block, Element, Modifier • Yandex੡

  40. BEM (Block) • ̍ͭͷίϯϙʔωϯτͷ·ͱ·Γ

  41. Element (BEM) • BlockΛߏ੒͢Δཁૉ • ΞϯμʔείΞ2ͭ (__) Λ࢖͏͜ͱ͕ଟ͍ • Block__Element

  42. BEM (Modifier) • Block ·ͨ͸ ElementͷόϦΤʔγϣϯ • SMACSSͰ͍͏StateͱTheme • ϋΠϑϯ2ͭ

    (--) Λ࢖͏͜ͱ͕ଟ͍ (MindBEMding) • Block—Modifier, Element--Modifier
  43. BEM <ul class="tab" role="tablist"> <li class="tab__item"></li> <li class="tab__item"></li> <li class="tab__item--selected"></li>

    <li class="tab__item"></li> </ul>
  44. ͦͷଞ • ACSS • MCSS • FLOCSS

  45. Web੍࡞ऀͷͨΊͷ CSSઃܭͷڭՊॻ

  46. ཁ͢Δʹ

  47. CSSͷϧʔϧηοτʹ͸ είʔϓ͕ͳ͍͔Β໋໊نଇ ͰͳΜͱ͔͠Α͏

  48. CSSઃܭͷຊ࣭

  49. ϚϧνΫϥε ͱ γϯάϧΫϥε • ϚϧνΫϥεઃܭɿHTMLͷclassଐੑʹෳ਺ͷ஋ Λ૊Έ߹ΘͤͯελΠϧΛ౰ͯΔ (OOCSS) • γϯάϧΫϥεઃܭɿHTMLͷclassଐੑʹ1ͭͷ஋ ͰελΠϧΛ౰ͯΔ

    (BEM)
  50. ϚϧνΫϥεઃܭ <button class="btn btn-success btn-large">Submit</button>

  51. ϚϧνΫϥεઃܭͷϝϦοτ • ϧʔϧηοτͷ࠶ར༻ • ৑௕Ͱͳ͘ͳΓϑΝΠϧαΠζ͕খ͘͞ͳΔ

  52. ϚϧνΫϥεઃܭͷ໰୊఺ • ϧʔϧηοτʹڞ௨͢ΔϓϩύςΟ͕͋ͬͨ Β্ॻ͖͞ΕΔ • ϧʔϧηοτؒʹ҉໧ͷґଘؔ܎͕Ͱ͖Δ • ෼ް͍ελΠϧΨΠυ͕ඞཁ • HTMLͷηϚϯςΟοΫεΛଛͶΔ

  53. γϯάϧΫϥεઃܭ <button class=“btn-submit”>Submit</button> <button class=“btn-submit">Submit</button>

  54. γϯάϧΫϥεઃܭͷϝϦοτ • 1classଐੑʹରͯ͠1ϧʔϧηοτͳͷͰγϯ ϓϧ • ίϯςϯπͷ಺༰ʹదͨ͠ηϚϯςΟοΫͳ ໊લ

  55. γϯάϧΫϥεઃܭͷ໰୊఺ • 1ͭͷϧʔϧηοτ͕େ͖͘ͳΓɺهड़͕৑௕ ʹͳΔ • ϧʔϧηοτͷ࠶ར༻ੑ͕௿͍ • ϑΝΠϧαΠζͷංେԽ • αΠτύϑΥʔϚϯεͷ௿Լ

  56. γϯάϧΫϥεઃܭͱ ϚϧνΫϥεઃܭͷ ͍͍ͱ͜औΓΛͨ͠ ͍͖͞ΐ͏ͷઃܭख๏ by @morishitter_

  57. CSSઃܭͷຊ࣭͸

  58. ηϨΫλͷ໋໊نଇͰ͸ͳ͘

  59. ϧʔϧηοτͷ෼ׂཻ౓

  60. ཧ૝తͳ CSS ͱ͸Կ͔

  61. CSS ʹݶͬͨ࿩Ͱ͸ͳ͍

  62. ࠓࣗ෼͕࢖͍ͬͯΔٕज़ɾಓ۩͸ ࣗ෼ʹͱͬͯҰମͲ͏͍͏ଘࡏͳͷ͔

  63. ࣌ʹ͸ͦͷٕज़ͷࢥ૝͑͞΋͍ٙ ΑΓྑ͍΋ͷΛ࡞Γ͍ͨ

  64. ಓ۩ʹৼΓճ͞ΕΔͳ ղܾ͍ͨ͠໰୊͸͍ͭ΋ಉ͡

  65. શମΛ၆ᛌ͠ ຊ࣭ΛݟۃΊΔ

  66. Thanks :D Any Questions? @morishitter_