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

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

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

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

Toro_Unit (Hiroshi Urabe)

April 12, 2016
Tweet

More Decks by Toro_Unit (Hiroshi Urabe)

Other Decks in Technology

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