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

by Toro_Unit (Hiroshi Urabe)

Slide 1

Slide 1 text

·ͩؒʹ߹͏ʮCSSઃܭʯ͜ͱ͸͡Ίɻ CSSͷҋʹҿΈࠐ·Εͳ͍ͨΊͷߟ͑ํɻ 2016.4.12 @WP-D Week Day 2 2016.4.12 @WP-D Week Day 2 1

Slide 2

Slide 2 text

whoami ͜͡͠ΐ͏͔͍ 2016.4.12 @WP-D Week Day 2 2

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

௕໺ݝদຊࢢͬͯͱ͜ΖͰɺ ϑϦʔϥϯεͯ͠·͢ɻ Ͱ΋܈അݝग़਎ 2016.4.12 @WP-D Week Day 2 4

Slide 5

Slide 5 text

Profile • WordPress ͳਓͰ͢ɻύʔϚϦϯΫͷϓϥάΠϯ࡞ͬͨΓɺ ίΞίϯτϦϏϡʔλʔʹͳͬͨΓɺ͍Ζ͍Ζ΍ͬͯ·͢ɻ • CSSབྷΈͰ͸ɺ࢖͍΍͍͢WordPressͷͨΊͷCSSͷͭ͘Γ ͔ͨ ͱ͔Ͱొஃͨ͠ΓɺBasis ͱ͍͏CSSϑϨʔϜϫʔΫʹ ϓϧϦΫΛૹΓ͚ͭͨΓͯ͠·ͨ͠ɻ 2016.4.12 @WP-D Week Day 2 5

Slide 6

Slide 6 text

Ͱ͸ຊ୊ɻ 2016.4.12 @WP-D Week Day 2 6

Slide 7

Slide 7 text

օ͞Μɺ ͜Μͳܦݧ͸͋Γ·ͤΜ͔ʁ 2016.4.12 @WP-D Week Day 2 7

Slide 8

Slide 8 text

• 1೥Ҏ্લʹೲ඼ͨ͠Ҋ݅ͷमਖ਼ґཔɻ • ୭͕ॻ͍ͨͷ͔΋ྑ͘ղΒͳ͍Ҿ͖ܧ͗Ҋ݅ɻ • 1ສߦΛ༨༟Ͱ௒͑ͯΔCSSɻ • ΄ͱΜͲ͸ɺίϐϖίʔυͷڰتཚ෣ɻ • ͔͠΋ࡉ͔͍ͱ͜Ζ͕গͣͭ͠ҧͬͯΔɻ 2016.4.12 @WP-D Week Day 2 8

Slide 9

Slide 9 text

ʮطଘͷCSSʁ୭͕ಡΉ͔ʂʯ 2016.4.12 @WP-D Week Day 2 9

Slide 10

Slide 10 text

݁Ռ 2016.4.12 @WP-D Week Day 2 10

Slide 11

Slide 11 text

૿৩͢ΔṖͷɺʮfix.cssʯ, ʮappend.cssʯ, ʮcustom.cssʯ, etc... 2016.4.12 @WP-D Week Day 2 11

Slide 12

Slide 12 text

ͦͯ͠ੜ·ΕΔ important! ͷ෗ւɻ ΋͸΍୭΋৮Εͳ͍ CSS ͷ஀ੜɻ 2016.4.12 @WP-D Week Day 2 12

Slide 13

Slide 13 text

2016.4.12 @WP-D Week Day 2 13

Slide 14

Slide 14 text

ผʹ͜Εͬͯɺ͜͜࠷ۙͷ࿩͡Όແ͍ΑͶ ... 2016.4.12 @WP-D Week Day 2 14

Slide 15

Slide 15 text

ਓྨ͸ʮCSS͸೉͍͠ʂʯͱ͍͏͜ͱʹ͍͍Ճݮʹؾͮ͘΂͖ɻ 2016.4.12 @WP-D Week Day 2 15

Slide 16

Slide 16 text

ͦΜͳࡢࠓͰ͕͢ɺ ϚϧνσόΠεରԠɺϨεϙϯγϒͩ ͱ͔Ͱɺ·͢·͢೉͘͠ͳΔCSS 2016.4.12 @WP-D Week Day 2 16

Slide 17

Slide 17 text

• IEͷҋ͔Β͍͍Ճݮൈ͚ग़ͨ͠ͱࢥͬͨͷʹ… • ͩΕͩΑ!!! HTML/CSS͸؆୯ͩͱ͔ݴౕͬͨ͸!!! 2016.4.12 @WP-D Week Day 2 17

Slide 18

Slide 18 text

͸͍ɻ 2016.4.12 @WP-D Week Day 2 18

Slide 19

Slide 19 text

Q. Ͱ͸ɺਓྨ͸Ͳ͏΍ͬͯCSSͱཱͪ ޲͔͑͹ྑ͍ͷ͔ʁ 2016.4.12 @WP-D Week Day 2 19

Slide 20

Slide 20 text

A. ΧΦεԽ͠ͳ͍Α͏ʹCSSΛॻ͘! 2016.4.12 @WP-D Week Day 2 20

Slide 21

Slide 21 text

ΧΦεԽ͠ͳ͍Α͏ͳCSS • ϖʔδɾཁૉͷ௥Ճ͕؆୯ʹͰ͖Δ͜ͱɻ͋Δఔ౓ CSS ॻ͔ ͳͯ͘΋ग़དྷΔΑ͏ʹ͢Δ͜ͱɻͦ΋ͦ΋CSSΛ௥ه͠ͳ͚ Ε͹෗ւԽ͠ͳ͍ɻ • อकɾσβΠϯมߋ͕؆୯ʹͰ͖Δ͜ͱɻͲ͜Λ͍͡Ε͹ྑ ͍ͷ͔͕ɺΘ͔Γ΍͍͢͜ͱɻෆཁͳ CSS ͕࢒ΓͮΒ͍ɺӨ ڹ͠ਏ͍Α͏ʹ͢Ε͹ɺCSSͷ্ॻ͖஍ࠈɺimportant ஍ࠈ ͸๷͛Δɻ 2016.4.12 @WP-D Week Day 2 21

Slide 22

Slide 22 text

• ਓؒʹͱͬͯಡΈ΍͍͢͜ͱɻͦ΋ͦ΋ɺਓ͕ؒಡΉؾʹͳ Βͳ͍ or ಡΊͳ͍ CSS ͕෗ւԽ͠ͳ͍Θ͚͕ͳ͍ɻͱ͍͏ ͔طʹ෗ւɻ 2016.4.12 @WP-D Week Day 2 22

Slide 23

Slide 23 text

Ͳ͏΍ͬͯʁ 2016.4.12 @WP-D Week Day 2 23

Slide 24

Slide 24 text

CSS Ͱ։ൃ͢Δ্ͰͷઓུΛཱͯΔɻ 2016.4.12 @WP-D Week Day 2 24

Slide 25

Slide 25 text

͜ͷઓུ = ʮCSSઃܭʯ 2016.4.12 @WP-D Week Day 2 25

Slide 26

Slide 26 text

Google ͷΤϯδχΞͷ Philip Walton ࢯ͕͜ͷ݅ʹ͍ͭͯॻ͍ ͨهࣄ͕ͪ͜ΒɻCSS Architecture — Philip Walton • ೔ຊޠ൛ɿCSS Architecture 2016.4.12 @WP-D Week Day 2 26

Slide 27

Slide 27 text

Philip Walton ࢯͷݴ͏ྑ͍ CSS ͷ৚݅ͱ͸ɻ • ༧ଌ͠΍͍͢ (PIEͷݪଇ) • ࠶ར༻͠΍͍͢ (DRYݪଇ) • อक͠΍͍͢ / ֦ு͠΍͍͢ (ΦʔϓϯɾΫϩʔζυͷݪଇ) 2016.4.12 @WP-D Week Day 2 27

Slide 28

Slide 28 text

ͦͷͨΊʹɺ࣮ફ͍ͯ͠Δ͜ͱɻ 2016.4.12 @WP-D Week Day 2 28

Slide 29

Slide 29 text

1. ͪΌΜͱ OOCSS ΍Δ 2016.4.12 @WP-D Week Day 2 29

Slide 30

Slide 30 text

OOCSSͷ̎େݪଇ 1. ߏ଄ͱݟͨ໨Λ෼཭ɻ 2. ίϯςφͱίϯςϯπͷ෼཭ɻ 2016.4.12 @WP-D Week Day 2 30

Slide 31

Slide 31 text

ߏ଄ͱݟͨ໨ͷ෼཭ 2016.4.12 @WP-D Week Day 2 31

Slide 32

Slide 32 text

.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

Slide 33

Slide 33 text

͜͏͠Α͏ 2016.4.12 @WP-D Week Day 2 33

Slide 34

Slide 34 text

/*Ϙλϯͷߏ଄*/ .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

Slide 35

Slide 35 text

ߏ଄ͱݟͨ໨ͷ෼཭͢ΔϝϦοτ 1.ίʔυͷॏෳ͕ආ͚ΒΕΔɻอकੑ্͕͕Δɻ 2.֦ு͕ͱͯ΋༻ҙʹͳΔɻ ྫ • Bootstrap ͷ Button 2016.4.12 @WP-D Week Day 2 35

Slide 36

Slide 36 text

ίϯςφͱίϯςϯπͷ෼཭

.sidebar .avatar { width: 200px; border: 5px solid #FFF; box-shadow: 0 2px 3px #000; } 2016.4.12 @WP-D Week Day 2 36

Slide 37

Slide 37 text

͜͏͠Α͏ 2016.4.12 @WP-D Week Day 2 37

Slide 38

Slide 38 text

.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

Slide 39

Slide 39 text

ίϯςφͱίϯςϯπͷ෼཭ͷϝϦοτ 1. ৔ॴɺίϯςΩετʹґଘ͠ͳ͍ίʔυ͕૿͑Δɻ 2. ࠶ར༻͠΍͍͢ʂ 3. αΠυόʔͷ΢ΟδΣοτʹɺ.widget { width: 200px } Έ͍ͨͳ CSS ͱ͔΍Γ͕ͪͰ͚͢ͲɺϑολʔͰ΋࢖͍ͨ ͍...͚Ͳԣ෯͍͕ͯ͠अຐ…ͳΜͯͷ͸ྑ͋͘Δ࿩ɻ 2016.4.12 @WP-D Week Day 2 39

Slide 40

Slide 40 text

OOCSSͷྫ • Bootstrap • Foundation 2016.4.12 @WP-D Week Day 2 40

Slide 41

Slide 41 text

OOCSS͸͢΂ͯͷجૅͳͷͰɺ͜Ε͸ ຊ౰ʹ͔ͬ͠Γԡ͑͞Α͏ɻ 2016.4.12 @WP-D Week Day 2 41

Slide 42

Slide 42 text

ৄ͘͠͸྘ຊΛಡ΋͏ 2016.4.12 @WP-D Week Day 2 42

Slide 43

Slide 43 text

2.࢓ࣄͷ΍Γํ౳ 2016.4.12 @WP-D Week Day 2 43

Slide 44

Slide 44 text

ϖʔδɺσβΠϯΧϯϓ͝ͱʹ CSS Λ࡞Βͳ ͍ɻίϯϙʔωϯτࢦ޲ͳ CSS Λɻ • ͜ΕΛ΍Δͱ͍͍ͩͨɺ৽نϖʔδ௥Ճͷͨͼʹ CSS Λ௥ه ͢Δࣄଶ͕ى͜Δɻ • .page-privacy Έ͍ͨͳΫϥεΛbodyΛॻ͔ͳ͍ͱͩΊͳ CSSͱ͔ɺଞͷϖʔδͰ࢖͍͍ͨͱ͖ɺͲ͏͢Δͷʁ • ൚༻ੑͷ͋ΔύʔπΛ૊Έ߹ΘͤͯɺHTML Λ૊ΜͰ͍͚Δ ΋ͷΛ໨ࢦ͢΂͠ɻ 2016.4.12 @WP-D Week Day 2 44

Slide 45

Slide 45 text

CSS͸੔ཧ͢Δɻ 1. Ϧηοτɾnormalize 2. ϕʔεͷHTMLཁૉ΁ͷCSS 3. ϨΠΞ΢τɺύʔπͳͲͷίϯϙʔωϯτ΁ͷCSS ͱ͍͏ॱʹৄࡉ౓ͷ௿͍ॱͰॻ͍͍ͯ͘ɻ 2016.4.12 @WP-D Week Day 2 45

Slide 46

Slide 46 text

HTMLɺίϯςϯπʹґଘ͠ͳ͍ɻ • HTMLɾίϯςϯπ͕มΘͬͯ΋มΘΒͳ͍Α͏ʹCSS͸ઃ ܭ͢Δɻ • Ϋϥε໊౳΋ɺίϯςϯπʹґଘ͢Δ΋ͷͰ͸ͳ͘ɺػೳʹ ର໋໊ͯ͢͠ΔɻχϡʔεΤϯτϦʔʹରͯ͠ɺ.news-entry ͱ໋໊ͯ͠ɺͦͷޙͦΕΛళฮ঺հͰ΋࢖͏͜ͱʹͳͬͨ Γɻɻɻʢ࣮࿩ʣ 2016.4.12 @WP-D Week Day 2 46

Slide 47

Slide 47 text

ҰͭͷίϯϙʔωϯτͰ͍Ζ͍Ζ΍Γա͗ͳ͍ɻ • αΠυόʔͷ΢ΟδΣοτʹɺ.widget { width: 200px } Έ͍ͨͳ CSS ͱ͔΍Γ͕ͪͰ͚͢ͲɺϑολʔͰ΋࢖͍ͨ ͍...͚Ͳԣ෯͍͕ͯ͠अຐ…ͳΜͯͷ͸ྑ͋͘Δ࿩ɻ • ཁૉͱɺϨΠΞ΢τͷͨΊͷ CSS ͸͔ͬ͠Γ෼ׂɻઈର஋Ͱ αΠζ΍৔ॴΛࢦఆ͍ͯ͠Δ΋ͷ͸ཁ஫ҙɻ • ίϯςφʔͱίϯςϯπͷ෼཭͸͔ͬ͠Γɻ 2016.4.12 @WP-D Week Day 2 47

Slide 48

Slide 48 text

ηϨΫλʔͷڧ͞͸ՄೳͳݶΓऑ͘ɻ • ID ηϨΫλ͸࢖Θͳ͍ʂηϨΫλʔ͕ແବʹڧ͘ͳͬͯ ! important ஍ࠈΛҾ͖ى͜͢ɻ·ͨɺIDηϨΫλʹ͸ɺϖʔ δ಺ϦϯΫͳͲͷ໾ׂ΋͋ΔͷͰίϯςϯπʹґଘ͕ͪ͠ɻ • .entry-body h1 Έ͍ͨͳ͜ͱ΋΍Γ͕ͪͰ͕͢ɺ͜͏͍ͬͨ CSS͕͋ͬͨΓ͢Δͱɺh1ʹΫϥεΛ౰ͯͯ...Έ͍ͨͳͱ͖ ʹ CSS ͕ద༻͞Εͳ͍౳ͷτϥϒϧ͕ɻɻɻ 2016.4.12 @WP-D Week Day 2 48

Slide 49

Slide 49 text

਌ཁૉʹґଘͨ͠ηϨΫλʔ͸࢖Θͳ͍ɻ • .comment .title, .entry .title ౳ͷηϨΫλʔ͸Ұݟྑͦ͞͏ͩ ͚Ͳɺ.title ʹ CSS ͕͋ͨΒͳ͍ͳΜͯอূ͸ͳ͍͠ɺ.entry ͷதʹ .comment ͕ଘࡏͨ͠৔߹ͱ͔ɻɻɻ.comment- title, .entry-title ౳ɺ਌ཁૉʹґଘ͠ͳ໋໊͍͸େࣄɻ • SMACSSͱ͔ɺBEM౳Λಋೖ͢Δͱָ͔΋ɻ 2016.4.12 @WP-D Week Day 2 49

Slide 50

Slide 50 text

ػೳɺίϯϙʔωϯτ͝ͱʹϑΝΠϧ෼ׂ͢Δ • Ұຕͷ CSS ϑΝΠϧʹΰϦΰϦॻ͍͍ͯ͘ͱɺͲ͏ͯ͠΋Ұ ͭͷػೳΛ࣮ݱ͢ΔͨΊͷ CSS͕෼ࢄͨ͠Γ͕ͪ͠ɻͳͷ Ͱɺػೳ͝ͱʹ CSS ϑΝΠϧΛ෼ׂ͢΂͠ɻ • ҰͭͷίϯϙʔωϯτͰ͍Ζ͍Ζ΍Γա͗ͯͳ͍͔ʁ෼ׂ͢ ΂͖͔ʁ౳ͷࢦ਑ʹ΋ͳΔɻ • ࢖Θͳ͍CSSΛൃݟ͠΍͍͢ɻ 2016.4.12 @WP-D Week Day 2 50

Slide 51

Slide 51 text

ຊจͳͲͷཁૉ͔ΒCSSΛॻ͍͍ͯ͘ɻ • Ϧηοτͷ͋ͱʹॻ͘ɺHTMLཁૉ΁ͷ CSS ͸ͦͷαΠτͷ جຊͷσβΠϯɻ͜ΕΛ·ͣ͸͔ͬ͠Γ࣮૷͢Δɻຊจཝ༻ ʹɺ.main-contents h2 ౳ͷ CSS Λॻ͘ͷ͸࣮֬ʹ CSS Λෳ ࡶʹ͢Δɻ 2016.4.12 @WP-D Week Day 2 51

Slide 52

Slide 52 text

ΈΜͳ྘ͷຊಡΜͰɺ SMACSSͱ͔FLOCSS ͱ͔΍Ε͹͍͍Α!!! 2016.4.12 @WP-D Week Day 2 52

Slide 53

Slide 53 text

3. ৺ߏ͑ฤ 2016.4.12 @WP-D Week Day 2 53

Slide 54

Slide 54 text

ڧ͍৺Λ࣋ͱ͏ɻ • CSS͸௒ΏΔ;Θݴޠɻ؆୯ʹյΕΔɻҰ౓ઃܭ͕ഁ୼͢Δ ͱɺͦͷ CSS ͷઃܭ͕৴༻Ͱ͖ͳ͘ͳΔɻ • Ϋιίʔυ΁ͷ଀͠Έɺٕज़ऀͱͯ͠ͷϓϥΠυ͸௒ॏཁɻ • ׂΕͨ૭ͷ๏ଇɺϘʔΠεΧ΢τͷنଇ 2016.4.12 @WP-D Week Day 2 54

Slide 55

Slide 55 text

҆қͳίϐϖίʔυ͸ຑༀɻ • CSS ͕ແବʹ௕͘ͳͬͯɺ෗ւԽ͢ΔҰ൪ͷݩڟɻ • طଘͷίϯϙʔωϯτͷ֦ுͰग़དྷͳ͍΋ͷ͔Λߟ͑Α͏ɻ • ίϐϖͨ͘͠ͳͬͨͱ͖͸ɺઃܭΛݟ௚͢νϟϯεɻ 2016.4.12 @WP-D Week Day 2 55

Slide 56

Slide 56 text

RefactoringʂRefactoringʂRefactoringʂ • CSS Λॻ͘ͱ͖͸ɺσβΠϯ͕ϒϥ΢βͰ࠶ݱͰ͖ͨʂͰऴ ΘΓʹ͠ͳ͍ɻઈରϦϑΝΫλϦϯά͢Δʂ • طଘͷίϯϙʔωϯτͷ֦ுͰग़དྷΔ͜ͱɺҰͭͷίϯϙʔ ωϯτͷ໾ׂ͕େ͖͗͢Δέʔε͸ଟ෼ʹଘࡏ͢Δɻ • CSS ͸์͓ͬͯ͘ͱ͙͢ʹෳࡶոحʹͳͬͯ͠·͏ͷͰɺৗ ʹγϯϓϧͳߏ଄ʹͳΔΑ͏ʹϦϑΝΫλϦϯά͠ͳ͕Β։ ൃ͍ͯ͘͜͠ͱɻ 2016.4.12 @WP-D Week Day 2 56

Slide 57

Slide 57 text

υΩϡϝϯτେࣄɻ • ͤΊͯɺϑΝΠϧ෼ׂͷϧʔϧɺ໋໊ن໿ͳͲ͸υΩϡϝϯ τʹ͢Δɻ൒೥લͷઃܭͳΜ࣮ͯ֬ʹ๨ΕΔɻ • ΦϨΦϨઃܭͱ͔Ͳ͏ͤ๨ΕΔ͠มΘΔͷͰɺSMACSSͱ͔ FLOCSSͱ͔ͪΌΜͱυΩϡϝϯτͷ͋Δ΋ͷΛ࢖͏ͱ͍Ζ ͍Ζָɻ 2016.4.12 @WP-D Week Day 2 57

Slide 58

Slide 58 text

ϦϑΝΫλϦϯά΋υΩϡϝϯτ΋ຖ ճ΍Εͳ͍৔߹ͦ͜ɺͪΌΜͱͨ͠΋ ͷΛͭͬͯ͘ɺ࢖͍ճͦ͏ɻ ͍ͭͰʹGithubͱ͔ʹஔ͍͓͍ͯͯOSSͱ͔ʹ͓ͯ͘͠ͱ͍Ζ͍Ζ޾ͤʹͳΕΔ͔΋ɻ 2016.4.12 @WP-D Week Day 2 58

Slide 59

Slide 59 text

·ͱΊ 2016.4.12 @WP-D Week Day 2 59

Slide 60

Slide 60 text

CSS ͕ੜ·Εͯ20೥ͪΐͬͱɺςʔϒϧϨΠΞ΢τ͔Βͷస׵ ͕ىͬͯ͜10೥͘Β͍ɻ·ͩ·ͩɺ͜Ε͔ΒมΘ͍ͬͯ͘Μͩ ͱࢥ͍·͢ɻ ΍͸Γɺϓϩάϥϛϯάʹ͓͚Δઃܭͷϊ΢ϋ΢͸͔ͳΓೖͬ ͖͍ͯͯΔͷͰɺษڧͯ͠ΈΔͱɺ͍Ζ͍Ζ໾ཱͭ஌ࣝɾߟ͑ ͨํ͕खʹೖΓ·͢ɻϓϩάϥϛϯά͕ղΒͳͯ͘΋࢖͑Δ͜ ͱ͸ଟ͍Ͱ͢ɻ ϓϩάϥϛϯάݪଇҰཡ - Strategic Choice ΦϒδΣΫτࢦ޲ઃܭݪଇ - Strategic Choice 2016.4.12 @WP-D Week Day 2 60

Slide 61

Slide 61 text

ΏΔ;Θݴޠͳ CSS ΁ౖΓ΍൵͠ΈΛ֮͑Δ͜ͱ͸͜Ε͔Β΋ ଟ͍ͱࢥ͍·͕͢ɺWEBσβΠϯ΁ͷѪɺΤϯδχΞͱͯ͠ͷ ϓϥΠυΛ࣋ͬͯ৐Γӽ͍͖͑ͯ·͠ΐ͏ɻ 2016.4.12 @WP-D Week Day 2 61

Slide 62

Slide 62 text

͓ΘΓɻ 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