CSSઃܭख๏Ͱίϯϙʔωϯτ ઃܭͨ͠࿩ LINE גࣜձࣾ Ԭຊ ୓໵ 

Ͳ͏͍͏͜ͱ What does it mean? 

● ίϯϙʔωϯτΛ෼͚Δཻ౓Λ FLOCSS (ϑϩοΫε) ͷج४Λݩʹͨ͠ɻ ● https://github.com/hiloki/flocss ● FLOCSS ͸ɺOOCSS΍SMACSSɺBEMɺSuitCSSͷίϯηϓτΛऔΓೖΕͨɺϞδϡϥʔ ͳΞϓϩʔνͷͨΊͷ Made in Japan ͳ CSSߏ੒Ҋ ● جຊ͸ OOCSS ͷίϯηϓτɻ໋໊نଇͱ͔ࡉ͔͍෼͚ํ͕ҧ͏ɻ ● FLOCSS͸࣍ͷ3ͭͷϨΠϠʔͱɺObjectϨΠϠʔͷࢠϨΠϠʔͰߏ੒͞ΕΔɻ 1. Foundation - reset/normalize/base... 2. Layout - header/main/sidebar/footer... 3. Object i. Component - grid/button/form/media... ii. Project - articles/ranking/promo... iii. Utility - clearfix/display/margin... FLOCSS ͰίϯϙʔωϯτΛ੾ͬͯΈͨ 

1.Foundation - reset/normalize/base... 2.Layout - header/main/sidebar/footer... 3.Object i. Component - grid/button/form/media... ii.Project - articles/ranking/promo... iii.Utility - clearfix/display/margin...
 Foundation
 
 ϒϥ΢βͷσϑΥϧτελΠϧͷॳ ظԽ΍ɺϓϩδΣΫτʹ͓͚Δجຊ తͳελΠϧΛఆٛ͠·͢ Layout
 
 ϓϩδΣΫτڞ௨ͷίϯςφʔϒϩο ΫͷελΠϧΛఆٛ͠·͢ɻ
 ϖʔδ୯ҐͰ།ҰͷଘࡏͰ͋Δཁૉ ͱͳΓ·͢ɻ Object
 
 OOCSSͷίϯηϓτΛݩʹɺϓϩ δΣΫτʹ͓͚Δ܁Γฦ͞ΕΔϏδϡ ΞϧύλʔϯΛ͢΂ͯɻ
 ͞Βʹ3ͭͷϨΠϠʔʹ෼͚ΒΕ· ͢ɻ 

1.Foundation - reset/normalize/base... 2.Layout - header/main/sidebar/footer... 3.Object i. Component - grid/button/form/media... ii.Project - articles/ranking/promo... iii.Utility - clearfix/display/margin...
 Component ࠶ར༻Ͱ͖Δύλʔϯͱͯ͠ɺখ͞ ͳ୯ҐͷϞδϡʔϧΛఆٛ͠·͢ɻ Project ϓϩδΣΫτݻ༗ͷύλʔϯͰ͋Γɺ ͍͔ͭ͘ͷComponentͱɺͦΕʹ֘ ౰͠ͳ͍ཁૉʹΑͬͯߏ੒͞ΕΔ΋ ͷΛఆٛ͠·͢ɻ Utility ComponentͱProjectϨΠϠʔͷ ObjectͷϞσΟϑΝΠΞͰղܾ͢Δ ͜ͱ͕೉͍͠ɾద੾Ͱ͸ແ͍ɺΘͣ ͔ͳελΠϧͷௐ੔ͷͨΊͷศརΫ ϥεͳͲΛఆٛ͠·͢ɻ 

Ϟνϕʔγϣϯ The motivation 

● Vue ϑΝΠϧ಺ͷ style Λ scoped ʹ͍ͯͯ͠΋ɺ਌΋ࢠ΋ಉ໊ͷ Class Λ͍࣋ͬͯΔ৔߹ɺ ΨϯΨϯʹ਌͔Βࢠίϯϙʔωϯτʹ Style Өڹ༩͑ͯ͠·͏ ● ͜Ε͸ Vue ͷ࢓༷Ͱ΋͋Δ (ʮscoped-cssʯͷʮࢠίϯϙʔωϯτͷϧʔτཁૉࢀরʯ) ● Class ໊ΛίϯϙʔωϯτؒͰ΋ϢχʔΫʹ͠ͳ͖Ό(࢖໋ײ) ● ΞτϛοΫσβΠϯ͸৑௕ͳίϯϙʔωϯτʹͳΔ͠ɺcssͷ໋໊ͱໃ६͕ੜ͡Δ ● CSS ͷઃܭ୯ҐͰίϯϙʔωϯτ෼͚Ε͹෼͔Γ΍͍͢Μ͡Όͳ͍ʁ ΞτϛοΫσβΠϯͰ͸ຬ଍Ͱ͖ͳ͔ͬͨ 

ԿΛͨ͠ͷ͔ What I did 

● src/components/ ͷԼʹ FLOCSS ͷ࢓༷ʹ߹ΘͤΔܗͰ σΟϨΫτϦΛ௥Ճ ● ͦͷԼʹ vue ϑΝΠϧΛ֨ೲ ● Foundation ͸࢖͍ॴ͕ͳ͍ͷͰɹ࡞੒ͤͣɻ ● Layout ͸ʮϖʔδ୯ҐͰ།ҰͷଘࡏͰ͋ΔཁૉͱͳΔʯ ͱఆٛ͞Ε͍ͯΔͷͰɺSPA ϖʔδຖʹ vue ϑΝΠϧΛ ༻ҙ ● SPA Ͱ͸ͳ͍ϖʔδͰ΋ɺ੩తϖʔδຖʹ༻ҙ͢Ε ͹͍͍ɻ ● ϔομʔ΍ϑολʔ͸ layout/common/ ҎԼʹอଘ ● Utility ʹ͸ mixin ίϯϙʔωϯτͳͲΛ֨ೲ͢Δ ● ΋ͪΖΜ vue ϑΝΠϧ಺ͷ style ͸֘౰͢Δ FLOCSS Χ ςΰϦͷنଇʹԊͬͯɺهड़͢Δ VUE CLI3 ߏ੒ͷԼʹσΟϨΫτϦΛ௥Ճ 1. Foundation - reset/normalize/base... 2. Layout - header/main/sidebar/footer... 3. Object i. Component - grid/button/form/media... ii. Project - articles/ranking/promo... iii. Utility - clearfix/display/margin... 

Ͳ͏ͳͬͨͷ͔ What I got 

Ϟνϕʔγϣϯʹͳ͍ͬͯͨ͜ͱҰཡ ● ʲղܾʂʳVue ϑΝΠϧ಺ͷ style Λ scoped ʹ͍ͯͯ͠΋ɺ਌΋ࢠ΋ಉ໊ͷ Class Λ࣋ͬͯ ͍Δ৔߹ɺΨϯΨϯʹ਌͔Βࢠίϯϙʔωϯτʹ Style Өڹ༩͑ͯ͠·͏ ● ʲղܾʂʳΞτϛοΫσβΠϯ͸৑௕ͳίϯϙʔωϯτʹͳΔ͠ɺcssͷ໋໊ͱໃ६͕ੜ͡Δ Ϟνϕʔγϣϯʹͳ͍ͬͯͨ͜ͱ͸ղܾ 

● ଞͷਓʹ΋Θ͔Γ΍͍͢σβΠϯͳͷ͔൱͔ ● ·ͩαϯϓϧ਺͕গͳ͍ ● ࣗ෼ͷ৔߹ɺ CSS ઃܭʹೃછΈ͋Δ͔ΒΑ͔͔ͬͨ΋͠Εͳ͍ ·ͩΘ͔Βͳ͍͜ͱ 

THANK YOU