まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。

WP-D Week Day 2 「CSSについてLevel Up!」での発表資料です。

Transcript

1. ·ͩؒʹ߹͏ʮCSSઃܭʯ͜ͱ͸͡Ίɻ CSSͷҋʹҿΈࠐ·Εͳ͍ͨΊͷߟ͑ํɻ 2016.4.12 @WP-D Week Day 2 2016.4.12 @WP-D Week Day 2 1
2. whoami ͜͡͠ΐ͏͔͍ 2016.4.12 @WP-D Week Day 2 2
3. Toro_Unit ઎෦ ߛ (͏Β΂ ͻΖ͠) Frontend Engineer / Web Designer Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit WEB Site: https://torounit.com 2016.4.12 @WP-D Week Day 2 3
4. ௕໺ݝদຊࢢͬͯͱ͜ΖͰɺ ϑϦʔϥϯεͯ͠·͢ɻ Ͱ΋܈അݝग़਎ 2016.4.12 @WP-D Week Day 2 4
5. Profile • WordPress ͳਓͰ͢ɻύʔϚϦϯΫͷϓϥάΠϯ࡞ͬͨΓɺ ίΞίϯτϦϏϡʔλʔʹͳͬͨΓɺ͍Ζ͍Ζ΍ͬͯ·͢ɻ • CSSབྷΈͰ͸ɺ࢖͍΍͍͢WordPressͷͨΊͷCSSͷͭ͘Γ ͔ͨ ͱ͔Ͱొஃͨ͠ΓɺBasis ͱ͍͏CSSϑϨʔϜϫʔΫʹ ϓϧϦΫΛૹΓ͚ͭͨΓͯ͠·ͨ͠ɻ 2016.4.12 @WP-D Week Day 2 5
6. Ͱ͸ຊ୊ɻ 2016.4.12 @WP-D Week Day 2 6
7. օ͞Μɺ ͜Μͳܦݧ͸͋Γ·ͤΜ͔ʁ 2016.4.12 @WP-D Week Day 2 7
8. • 1೥Ҏ্લʹೲ඼ͨ͠Ҋ݅ͷमਖ਼ґཔɻ • ୭͕ॻ͍ͨͷ͔΋ྑ͘ղΒͳ͍Ҿ͖ܧ͗Ҋ݅ɻ • 1ສߦΛ༨༟Ͱ௒͑ͯΔCSSɻ • ΄ͱΜͲ͸ɺίϐϖίʔυͷڰتཚ෣ɻ • ͔͠΋ࡉ͔͍ͱ͜Ζ͕গͣͭ͠ҧͬͯΔɻ 2016.4.12 @WP-D Week Day 2 8
9. ʮطଘͷCSSʁ୭͕ಡΉ͔ʂʯ 2016.4.12 @WP-D Week Day 2 9
10. ݁Ռ 2016.4.12 @WP-D Week Day 2 10
11. ૿৩͢ΔṖͷɺʮfix.cssʯ, ʮappend.cssʯ, ʮcustom.cssʯ, etc... 2016.4.12 @WP-D Week Day 2 11
12. ͦͯ͠ੜ·ΕΔ important! ͷ෗ւɻ ΋͸΍୭΋৮Εͳ͍ CSS ͷ஀ੜɻ 2016.4.12 @WP-D Week Day 2 12
13. 2016.4.12 @WP-D Week Day 2 13
14. ผʹ͜Εͬͯɺ͜͜࠷ۙͷ࿩͡Όແ͍ΑͶ ... 2016.4.12 @WP-D Week Day 2 14
15. ਓྨ͸ʮCSS͸೉͍͠ʂʯͱ͍͏͜ͱʹ͍͍Ճݮʹؾͮ͘΂͖ɻ 2016.4.12 @WP-D Week Day 2 15
16. ͦΜͳࡢࠓͰ͕͢ɺ ϚϧνσόΠεରԠɺϨεϙϯγϒͩ ͱ͔Ͱɺ·͢·͢೉͘͠ͳΔCSS 2016.4.12 @WP-D Week Day 2 16
17. • IEͷҋ͔Β͍͍Ճݮൈ͚ग़ͨ͠ͱࢥͬͨͷʹ… • ͩΕͩΑ!!! HTML/CSS͸؆୯ͩͱ͔ݴౕͬͨ͸!!! 2016.4.12 @WP-D Week Day 2 17
18. ͸͍ɻ 2016.4.12 @WP-D Week Day 2 18
19. Q. Ͱ͸ɺਓྨ͸Ͳ͏΍ͬͯCSSͱཱͪ ޲͔͑͹ྑ͍ͷ͔ʁ 2016.4.12 @WP-D Week Day 2 19
20. A. ΧΦεԽ͠ͳ͍Α͏ʹCSSΛॻ͘! 2016.4.12 @WP-D Week Day 2 20
21. ΧΦεԽ͠ͳ͍Α͏ͳCSS • ϖʔδɾཁૉͷ௥Ճ͕؆୯ʹͰ͖Δ͜ͱɻ͋Δఔ౓ CSS ॻ͔ ͳͯ͘΋ग़དྷΔΑ͏ʹ͢Δ͜ͱɻͦ΋ͦ΋CSSΛ௥ه͠ͳ͚ Ε͹෗ւԽ͠ͳ͍ɻ • อकɾσβΠϯมߋ͕؆୯ʹͰ͖Δ͜ͱɻͲ͜Λ͍͡Ε͹ྑ ͍ͷ͔͕ɺΘ͔Γ΍͍͢͜ͱɻෆཁͳ CSS ͕࢒ΓͮΒ͍ɺӨ ڹ͠ਏ͍Α͏ʹ͢Ε͹ɺCSSͷ্ॻ͖஍ࠈɺimportant ஍ࠈ ͸๷͛Δɻ 2016.4.12 @WP-D Week Day 2 21
22. • ਓؒʹͱͬͯಡΈ΍͍͢͜ͱɻͦ΋ͦ΋ɺਓ͕ؒಡΉؾʹͳ Βͳ͍ or ಡΊͳ͍ CSS ͕෗ւԽ͠ͳ͍Θ͚͕ͳ͍ɻͱ͍͏ ͔طʹ෗ւɻ 2016.4.12 @WP-D Week Day 2 22
23. Ͳ͏΍ͬͯʁ 2016.4.12 @WP-D Week Day 2 23
24. CSS Ͱ։ൃ͢Δ্ͰͷઓུΛཱͯΔɻ 2016.4.12 @WP-D Week Day 2 24
25. ͜ͷઓུ = ʮCSSઃܭʯ 2016.4.12 @WP-D Week Day 2 25
26. Google ͷΤϯδχΞͷ Philip Walton ࢯ͕͜ͷ݅ʹ͍ͭͯॻ͍ ͨهࣄ͕ͪ͜ΒɻCSS Architecture — Philip Walton • ೔ຊޠ൛ɿCSS Architecture 2016.4.12 @WP-D Week Day 2 26
27. Philip Walton ࢯͷݴ͏ྑ͍ CSS ͷ৚݅ͱ͸ɻ • ༧ଌ͠΍͍͢ (PIEͷݪଇ) • ࠶ར༻͠΍͍͢ (DRYݪଇ) • อक͠΍͍͢ / ֦ு͠΍͍͢ (ΦʔϓϯɾΫϩʔζυͷݪଇ) 2016.4.12 @WP-D Week Day 2 27
28. ͦͷͨΊʹɺ࣮ફ͍ͯ͠Δ͜ͱɻ 2016.4.12 @WP-D Week Day 2 28
29. 1. ͪΌΜͱ OOCSS ΍Δ 2016.4.12 @WP-D Week Day 2 29
30. OOCSSͷ̎େݪଇ 1. ߏ଄ͱݟͨ໨Λ෼཭ɻ 2. ίϯςφͱίϯςϯπͷ෼཭ɻ 2016.4.12 @WP-D Week Day 2 30
31. ߏ଄ͱݟͨ໨ͷ෼཭ 2016.4.12 @WP-D Week Day 2 31
32. .submit-btn { display: inline-block; padding: 10px; color: #FFF; background: #66C; } .link-btn { display: inline-block; padding: 10px; color: #333; background: #C90; } 2016.4.12 @WP-D Week Day 2 32
33. ͜͏͠Α͏ 2016.4.12 @WP-D Week Day 2 33
34. /*Ϙλϯͷߏ଄*/ .btn { display: inline-block; padding: 10px; } /*Ϙλϯͷݟͨ໨*/ .btn-submit { color: #FFF; background: #66C; } .btn-link { color: #333; background: #C90; } 2016.4.12 @WP-D Week Day 2 34
35. ߏ଄ͱݟͨ໨ͷ෼཭͢ΔϝϦοτ 1.ίʔυͷॏෳ͕ආ͚ΒΕΔɻอकੑ্͕͕Δɻ 2.֦ு͕ͱͯ΋༻ҙʹͳΔɻ ྫ • Bootstrap ͷ Button 2016.4.12 @WP-D Week Day 2 35
36. ίϯςφͱίϯςϯπͷ෼཭ <aside class="sidebar"> <div> <img class="avatar" /> </div> </aside> .sidebar .avatar { width: 200px; border: 5px solid #FFF; box-shadow: 0 2px 3px #000; } 2016.4.12 @WP-D Week Day 2 36
37. ͜͏͠Α͏ 2016.4.12 @WP-D Week Day 2 37
38. <aside class="sidebar"> <div class="sidebar-widget"> <img class="avatar" /> </div> </aside> .sidebar-widget { /** ίϯςφ **/ width: 200px; } .avatar { /** ίϯςϯπ **/ width: 100%; border: 5px solid #FFF; box-shadow: 0 2px 3px #000; } 2016.4.12 @WP-D Week Day 2 38
39. ίϯςφͱίϯςϯπͷ෼཭ͷϝϦοτ 1. ৔ॴɺίϯςΩετʹґଘ͠ͳ͍ίʔυ͕૿͑Δɻ 2. ࠶ར༻͠΍͍͢ʂ 3. αΠυόʔͷ΢ΟδΣοτʹɺ.widget { width: 200px } Έ͍ͨͳ CSS ͱ͔΍Γ͕ͪͰ͚͢ͲɺϑολʔͰ΋࢖͍ͨ ͍...͚Ͳԣ෯͍͕ͯ͠अຐ…ͳΜͯͷ͸ྑ͋͘Δ࿩ɻ 2016.4.12 @WP-D Week Day 2 39
40. OOCSSͷྫ • Bootstrap • Foundation 2016.4.12 @WP-D Week Day 2 40
41. OOCSS͸͢΂ͯͷجૅͳͷͰɺ͜Ε͸ ຊ౰ʹ͔ͬ͠Γԡ͑͞Α͏ɻ 2016.4.12 @WP-D Week Day 2 41
42. ৄ͘͠͸྘ຊΛಡ΋͏ 2016.4.12 @WP-D Week Day 2 42
43. 2.࢓ࣄͷ΍Γํ౳ 2016.4.12 @WP-D Week Day 2 43
44. ϖʔδɺσβΠϯΧϯϓ͝ͱʹ CSS Λ࡞Βͳ ͍ɻίϯϙʔωϯτࢦ޲ͳ CSS Λɻ • ͜ΕΛ΍Δͱ͍͍ͩͨɺ৽نϖʔδ௥Ճͷͨͼʹ CSS Λ௥ه ͢Δࣄଶ͕ى͜Δɻ • .page-privacy Έ͍ͨͳΫϥεΛbodyΛॻ͔ͳ͍ͱͩΊͳ CSSͱ͔ɺଞͷϖʔδͰ࢖͍͍ͨͱ͖ɺͲ͏͢Δͷʁ • ൚༻ੑͷ͋ΔύʔπΛ૊Έ߹ΘͤͯɺHTML Λ૊ΜͰ͍͚Δ ΋ͷΛ໨ࢦ͢΂͠ɻ 2016.4.12 @WP-D Week Day 2 44
45. CSS͸੔ཧ͢Δɻ 1. Ϧηοτɾnormalize 2. ϕʔεͷHTMLཁૉ΁ͷCSS 3. ϨΠΞ΢τɺύʔπͳͲͷίϯϙʔωϯτ΁ͷCSS ͱ͍͏ॱʹৄࡉ౓ͷ௿͍ॱͰॻ͍͍ͯ͘ɻ 2016.4.12 @WP-D Week Day 2 45
46. HTMLɺίϯςϯπʹґଘ͠ͳ͍ɻ • HTMLɾίϯςϯπ͕มΘͬͯ΋มΘΒͳ͍Α͏ʹCSS͸ઃ ܭ͢Δɻ • Ϋϥε໊౳΋ɺίϯςϯπʹґଘ͢Δ΋ͷͰ͸ͳ͘ɺػೳʹ ର໋໊ͯ͢͠ΔɻχϡʔεΤϯτϦʔʹରͯ͠ɺ.news-entry ͱ໋໊ͯ͠ɺͦͷޙͦΕΛళฮ঺հͰ΋࢖͏͜ͱʹͳͬͨ Γɻɻɻʢ࣮࿩ʣ 2016.4.12 @WP-D Week Day 2 46
47. ҰͭͷίϯϙʔωϯτͰ͍Ζ͍Ζ΍Γա͗ͳ͍ɻ • αΠυόʔͷ΢ΟδΣοτʹɺ.widget { width: 200px } Έ͍ͨͳ CSS ͱ͔΍Γ͕ͪͰ͚͢ͲɺϑολʔͰ΋࢖͍ͨ ͍...͚Ͳԣ෯͍͕ͯ͠अຐ…ͳΜͯͷ͸ྑ͋͘Δ࿩ɻ • ཁૉͱɺϨΠΞ΢τͷͨΊͷ CSS ͸͔ͬ͠Γ෼ׂɻઈର஋Ͱ αΠζ΍৔ॴΛࢦఆ͍ͯ͠Δ΋ͷ͸ཁ஫ҙɻ • ίϯςφʔͱίϯςϯπͷ෼཭͸͔ͬ͠Γɻ 2016.4.12 @WP-D Week Day 2 47
48. ηϨΫλʔͷڧ͞͸ՄೳͳݶΓऑ͘ɻ • ID ηϨΫλ͸࢖Θͳ͍ʂηϨΫλʔ͕ແବʹڧ͘ͳͬͯ ! important ஍ࠈΛҾ͖ى͜͢ɻ·ͨɺIDηϨΫλʹ͸ɺϖʔ δ಺ϦϯΫͳͲͷ໾ׂ΋͋ΔͷͰίϯςϯπʹґଘ͕ͪ͠ɻ • .entry-body h1 Έ͍ͨͳ͜ͱ΋΍Γ͕ͪͰ͕͢ɺ͜͏͍ͬͨ CSS͕͋ͬͨΓ͢Δͱɺh1ʹΫϥεΛ౰ͯͯ...Έ͍ͨͳͱ͖ ʹ CSS ͕ద༻͞Εͳ͍౳ͷτϥϒϧ͕ɻɻɻ 2016.4.12 @WP-D Week Day 2 48
49. ਌ཁૉʹґଘͨ͠ηϨΫλʔ͸࢖Θͳ͍ɻ • .comment .title, .entry .title ౳ͷηϨΫλʔ͸Ұݟྑͦ͞͏ͩ ͚Ͳɺ.title ʹ CSS ͕͋ͨΒͳ͍ͳΜͯอূ͸ͳ͍͠ɺ.entry ͷதʹ .comment ͕ଘࡏͨ͠৔߹ͱ͔ɻɻɻ.comment- title, .entry-title ౳ɺ਌ཁૉʹґଘ͠ͳ໋໊͍͸େࣄɻ • SMACSSͱ͔ɺBEM౳Λಋೖ͢Δͱָ͔΋ɻ 2016.4.12 @WP-D Week Day 2 49
50. ػೳɺίϯϙʔωϯτ͝ͱʹϑΝΠϧ෼ׂ͢Δ • Ұຕͷ CSS ϑΝΠϧʹΰϦΰϦॻ͍͍ͯ͘ͱɺͲ͏ͯ͠΋Ұ ͭͷػೳΛ࣮ݱ͢ΔͨΊͷ CSS͕෼ࢄͨ͠Γ͕ͪ͠ɻͳͷ Ͱɺػೳ͝ͱʹ CSS ϑΝΠϧΛ෼ׂ͢΂͠ɻ • ҰͭͷίϯϙʔωϯτͰ͍Ζ͍Ζ΍Γա͗ͯͳ͍͔ʁ෼ׂ͢ ΂͖͔ʁ౳ͷࢦ਑ʹ΋ͳΔɻ • ࢖Θͳ͍CSSΛൃݟ͠΍͍͢ɻ 2016.4.12 @WP-D Week Day 2 50
51. ຊจͳͲͷཁૉ͔ΒCSSΛॻ͍͍ͯ͘ɻ • Ϧηοτͷ͋ͱʹॻ͘ɺHTMLཁૉ΁ͷ CSS ͸ͦͷαΠτͷ جຊͷσβΠϯɻ͜ΕΛ·ͣ͸͔ͬ͠Γ࣮૷͢Δɻຊจཝ༻ ʹɺ.main-contents h2 ౳ͷ CSS Λॻ͘ͷ͸࣮֬ʹ CSS Λෳ ࡶʹ͢Δɻ 2016.4.12 @WP-D Week Day 2 51
52. ΈΜͳ྘ͷຊಡΜͰɺ SMACSSͱ͔FLOCSS ͱ͔΍Ε͹͍͍Α!!! 2016.4.12 @WP-D Week Day 2 52
53. 3. ৺ߏ͑ฤ 2016.4.12 @WP-D Week Day 2 53
54. ڧ͍৺Λ࣋ͱ͏ɻ • CSS͸௒ΏΔ;Θݴޠɻ؆୯ʹյΕΔɻҰ౓ઃܭ͕ഁ୼͢Δ ͱɺͦͷ CSS ͷઃܭ͕৴༻Ͱ͖ͳ͘ͳΔɻ • Ϋιίʔυ΁ͷ଀͠Έɺٕज़ऀͱͯ͠ͷϓϥΠυ͸௒ॏཁɻ • ׂΕͨ૭ͷ๏ଇɺϘʔΠεΧ΢τͷنଇ 2016.4.12 @WP-D Week Day 2 54
55. ҆қͳίϐϖίʔυ͸ຑༀɻ • CSS ͕ແବʹ௕͘ͳͬͯɺ෗ւԽ͢ΔҰ൪ͷݩڟɻ • طଘͷίϯϙʔωϯτͷ֦ுͰग़དྷͳ͍΋ͷ͔Λߟ͑Α͏ɻ • ίϐϖͨ͘͠ͳͬͨͱ͖͸ɺઃܭΛݟ௚͢νϟϯεɻ 2016.4.12 @WP-D Week Day 2 55
56. RefactoringʂRefactoringʂRefactoringʂ • CSS Λॻ͘ͱ͖͸ɺσβΠϯ͕ϒϥ΢βͰ࠶ݱͰ͖ͨʂͰऴ ΘΓʹ͠ͳ͍ɻઈରϦϑΝΫλϦϯά͢Δʂ • طଘͷίϯϙʔωϯτͷ֦ுͰग़དྷΔ͜ͱɺҰͭͷίϯϙʔ ωϯτͷ໾ׂ͕େ͖͗͢Δέʔε͸ଟ෼ʹଘࡏ͢Δɻ • CSS ͸์͓ͬͯ͘ͱ͙͢ʹෳࡶոحʹͳͬͯ͠·͏ͷͰɺৗ ʹγϯϓϧͳߏ଄ʹͳΔΑ͏ʹϦϑΝΫλϦϯά͠ͳ͕Β։ ൃ͍ͯ͘͜͠ͱɻ 2016.4.12 @WP-D Week Day 2 56
57. υΩϡϝϯτେࣄɻ • ͤΊͯɺϑΝΠϧ෼ׂͷϧʔϧɺ໋໊ن໿ͳͲ͸υΩϡϝϯ τʹ͢Δɻ൒೥લͷઃܭͳΜ࣮ͯ֬ʹ๨ΕΔɻ • ΦϨΦϨઃܭͱ͔Ͳ͏ͤ๨ΕΔ͠มΘΔͷͰɺSMACSSͱ͔ FLOCSSͱ͔ͪΌΜͱυΩϡϝϯτͷ͋Δ΋ͷΛ࢖͏ͱ͍Ζ ͍Ζָɻ 2016.4.12 @WP-D Week Day 2 57
58. ϦϑΝΫλϦϯά΋υΩϡϝϯτ΋ຖ ճ΍Εͳ͍৔߹ͦ͜ɺͪΌΜͱͨ͠΋ ͷΛͭͬͯ͘ɺ࢖͍ճͦ͏ɻ ͍ͭͰʹGithubͱ͔ʹஔ͍͓͍ͯͯOSSͱ͔ʹ͓ͯ͘͠ͱ͍Ζ͍Ζ޾ͤʹͳΕΔ͔΋ɻ 2016.4.12 @WP-D Week Day 2 58
59. ·ͱΊ 2016.4.12 @WP-D Week Day 2 59
60. CSS ͕ੜ·Εͯ20೥ͪΐͬͱɺςʔϒϧϨΠΞ΢τ͔Βͷస׵ ͕ىͬͯ͜10೥͘Β͍ɻ·ͩ·ͩɺ͜Ε͔ΒมΘ͍ͬͯ͘Μͩ ͱࢥ͍·͢ɻ ΍͸Γɺϓϩάϥϛϯάʹ͓͚Δઃܭͷϊ΢ϋ΢͸͔ͳΓೖͬ ͖͍ͯͯΔͷͰɺษڧͯ͠ΈΔͱɺ͍Ζ͍Ζ໾ཱͭ஌ࣝɾߟ͑ ͨํ͕खʹೖΓ·͢ɻϓϩάϥϛϯά͕ղΒͳͯ͘΋࢖͑Δ͜ ͱ͸ଟ͍Ͱ͢ɻ ϓϩάϥϛϯάݪଇҰཡ - Strategic Choice ΦϒδΣΫτࢦ޲ઃܭݪଇ - Strategic Choice 2016.4.12 @WP-D Week Day 2 60
61. ΏΔ;Θݴޠͳ CSS ΁ౖΓ΍൵͠ΈΛ֮͑Δ͜ͱ͸͜Ε͔Β΋ ଟ͍ͱࢥ͍·͕͢ɺWEBσβΠϯ΁ͷѪɺΤϯδχΞͱͯ͠ͷ ϓϥΠυΛ࣋ͬͯ৐Γӽ͍͖͑ͯ·͠ΐ͏ɻ 2016.4.12 @WP-D Week Day 2 61
62. ͓ΘΓɻ Follow Me! Github: @torounit Twitter: @Toro_Unit Facebook: fb.me/torounit WEB Site: https://torounit.com 2016.4.12 @WP-D Week Day 2 62