Introduction to CSS Architecture

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

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_