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

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 ͋͘·Ͱϕʔε
 ྟػԠมʹରԠ