CSS設計手法でコンポーネント設計した話

Vue.js でコンポーネント設計している時にどういった分け方をするか、悩むことがよくあります。アトミックデザインが有名ですが、今回は CSS 設計手法を vue ファイルのコンポーネント分けに取り入れてみたので、その報告です。
#vue #FLOCSS #OOCSS

Transcript

1. CSSઃܭख๏Ͱίϯϙʔωϯτ ઃܭͨ͠࿩ LINE גࣜձࣾ Ԭຊ ୓໵
2. Ͳ͏͍͏͜ͱ What does it mean?
3. • ίϯϙʔωϯτΛ෼͚Δཻ౓Λ 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 ͰίϯϙʔωϯτΛ੾ͬͯΈͨ
4. 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ͭͷϨΠϠʔʹ෼͚ΒΕ· ͢ɻ
5. 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ͷϞσΟϑΝΠΞͰղܾ͢Δ ͜ͱ͕೉͍͠ɾద੾Ͱ͸ແ͍ɺΘͣ ͔ͳελΠϧͷௐ੔ͷͨΊͷศརΫ ϥεͳͲΛఆٛ͠·͢ɻ
6. Ϟνϕʔγϣϯ The motivation
7. • Vue ϑΝΠϧ಺ͷ style Λ scoped ʹ͍ͯͯ͠΋ɺ਌΋ࢠ΋ಉ໊ͷ Class Λ͍࣋ͬͯΔ৔߹ɺ ΨϯΨϯʹ਌͔Βࢠίϯϙʔωϯτʹ Style Өڹ༩͑ͯ͠·͏ • ͜Ε͸ Vue ͷ࢓༷Ͱ΋͋Δ (ʮscoped-cssʯͷʮࢠίϯϙʔωϯτͷϧʔτཁૉࢀরʯ) • Class ໊ΛίϯϙʔωϯτؒͰ΋ϢχʔΫʹ͠ͳ͖Ό(࢖໋ײ) • ΞτϛοΫσβΠϯ͸৑௕ͳίϯϙʔωϯτʹͳΔ͠ɺcssͷ໋໊ͱໃ६͕ੜ͡Δ • CSS ͷઃܭ୯ҐͰίϯϙʔωϯτ෼͚Ε͹෼͔Γ΍͍͢Μ͡Όͳ͍ʁ ΞτϛοΫσβΠϯͰ͸ຬ଍Ͱ͖ͳ͔ͬͨ
8. ԿΛͨ͠ͷ͔ What I did
9. • 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...
10. Ͳ͏ͳͬͨͷ͔ What I got
11. Ϟνϕʔγϣϯʹͳ͍ͬͯͨ͜ͱҰཡ • ʲղܾʂʳVue ϑΝΠϧ಺ͷ style Λ scoped ʹ͍ͯͯ͠΋ɺ਌΋ࢠ΋ಉ໊ͷ Class Λ࣋ͬͯ ͍Δ৔߹ɺΨϯΨϯʹ਌͔Βࢠίϯϙʔωϯτʹ Style Өڹ༩͑ͯ͠·͏ • ʲղܾʂʳΞτϛοΫσβΠϯ͸৑௕ͳίϯϙʔωϯτʹͳΔ͠ɺcssͷ໋໊ͱໃ६͕ੜ͡Δ Ϟνϕʔγϣϯʹͳ͍ͬͯͨ͜ͱ͸ղܾ
12. • ଞͷਓʹ΋Θ͔Γ΍͍͢σβΠϯͳͷ͔൱͔ • ·ͩαϯϓϧ਺͕গͳ͍ • ࣗ෼ͷ৔߹ɺ CSS ઃܭʹೃછΈ͋Δ͔ΒΑ͔͔ͬͨ΋͠Εͳ͍ ·ͩΘ͔Βͳ͍͜ͱ
13. THANK YOU