最近やったCSSの設計と やってみて感じたこと

【CSS】Meetup Kansai U30 #2 #u30_kansai これまでの組み方とこれからどうしよっかって考えてる話

Transcript

1. Meetup Kansai U30 #2 ࠷ۙ΍ͬͨCSSͷઃܭͱ
 ΍ͬͯΈͯײͨ͜͡ͱ Daisuke KONISHI
2. Meetup Kansai U30 #2 Daisuke KONISHI @skd_nw coroutine inc. / WebΤϯδχΞ WordBenchژ౎ ϞσϨʔλʔ CSSϑϨϯζ
3. Meetup Kansai U30 #2 ࠷ۙ΍ͬͨ͜ͱΛॻ͍ͯ·͢
4. Meetup Kansai U30 #2 ࠷ۙస৬͠·ͨ͠ ϚʔΫΞοϓΤϯδχΞ ɹˣ WebΤϯδχΞ
 (WebϑϩϯτΤϯυଟΊ αʔόʔαΠυษڧத)
5. Meetup Kansai U30 #2 ͜Ε·Ͱ • தʙେن໛ͷίʔϙϨʔταΠτ • ޙ೔ෳ਺ճߋ৽༗ΓͷLP ɹͷ࣮૷Λͯ͠·ͨ͠
6. Meetup Kansai U30 #2 ͜Ε·Ͱ • σβΠϯʹରԠ͢ΔͨΊϑϧεΫϥον • CSSϝλݴޠ͸SassΛ࢖༻ • FLOCSS + Atomic Design • Codekit -> gulp(node-sass)
7. Meetup Kansai U30 #2 σβΠϯʹରԠ͢ΔͨΊ
 ϑϧεΫϥον σβΠφʔ͕දݱ͍ͨ͠ܗʹσβΠϯ͠ɺͦΕΛ ࣮૷͢Δελϯε ※σβΠφʔ΋ͳΜͱͳ࣮͘૷Λ෼͔͍ͬͯΔ ※࣮૷Ͱ͖Δ͔ෆ҆ͳͱ͖͸૬ஊ͢Δ(ਓ΋͍ͨ) ͜Ε·Ͱ
8. Meetup Kansai U30 #2 CSSϝλݴޠ͸SassΛ࢖༻ ࢿྉͷ๛෋͞ͱशಘͷ͠΍͔͢͞ΒSassΛ࢖༻ ͜Ε·Ͱ
9. Meetup Kansai U30 #2 FLOCSS + Atomic Design • FLOCSSͷϨΠϠʔͷ෼͚ํ͕ྑ͔ͬͨ
 https://github.com/hiloki/flocss • component ϨΠϠʔ͕๲ΒΈ͗͢ΔͨΊ
 Atomic Designͷࢥ૝Ͱ෼ׂ • BEMʹΑΔ֊૚ߏ଄ͷࢹ֮Խ ͜Ε·Ͱ
10. Meetup Kansai U30 #2 Codekit ͔Β gulp(node-sass) ΁ • GUIͰઃఆͰ͖ΔͨΊָͱ͍͏੠ • git Ͱ branch Λ੾Γସ͑Δ౓ʹ config ϑΝΠϧ͕ ߋ৽͞ΕΔ • ֎஫͢ΔࡍʹΞϓϦඇॴ࣋໰୊
 => Node.js ͰແঈͰ୭Ͱ΋࡞ΕΔ؀ڥʹ ͜Ε·Ͱ
11. Meetup Kansai U30 #2 ͜Ε͔Βͷ࣮૷Ͱߟ͑Δ͜ͱ • WebαΠτͰ͸ͳ͘WebγεςϜͷ࣮૷ • ௕ظతͳӡ༻ • ϝϯόʔͷCSSशख़౓Λߟྀ • ݟͨ໨ΑΓ·ͣػೳʹϦιʔεΛׂ͘
12. Meetup Kansai U30 #2 ͜Ε͔Βͷ࣮૷(ߟ͑த) • CSSϑϨʔϜϫʔΫΛ࠾༻ • ઃܭ͸FLOCSSϕʔε
13. Meetup Kansai U30 #2 CSSϑϨʔϜϫʔΫΛ࠾༻ • υΩϡϝϯτ͕͋Δ΋ͷΛ࢖༻͢Δ
 ͜ͱͰޙʑͷฤूΛ΍Γ΍͘͢ • Foundation, UI Kit, Bluma
14. Meetup Kansai U30 #2 ઃܭ͸FLOCSSϕʔεʹ • Ҏલ·Ͱͷߏ੒Ͱ΍Γ͖ΕΔਓ͕গͳ͍
 => ·ͣ͸FLOCSS(+BEM)ʹ׳ΕΔ • ͦ΋ͦ΋͜Ε·Ͱͷߏ੒Ͱ૊·ͳ͖Ό͍ ͚ͳ͍΋ͷ͕গͳͦ͏ʁ
15. Meetup Kansai U30 #2 ͋͘·Ͱϕʔε
 ྟػԠมʹରԠ