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

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

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

F703b996b502414dd880bc39789faa8f?s=128

Daisuke Konishi

December 02, 2017
Tweet

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