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

Transcript

1. 1.

   Meetup Kansai U30 #2 ࠷ۙ΍ͬͨCSSͷઃܭͱ
 ΍ͬͯΈͯײͨ͜͡ͱ Daisuke KONISHI

2. 2.

   Meetup Kansai U30 #2 Daisuke KONISHI @skd_nw coroutine inc. /

   WebΤϯδχΞ WordBenchژ౎ ϞσϨʔλʔ CSSϑϨϯζ
3. 3.

   Meetup Kansai U30 #2 ࠷ۙ΍ͬͨ͜ͱΛॻ͍ͯ·͢

4. 4.

   Meetup Kansai U30 #2 ࠷ۙస৬͠·ͨ͠ ϚʔΫΞοϓΤϯδχΞ ɹˣ WebΤϯδχΞ
 (WebϑϩϯτΤϯυଟΊ αʔόʔαΠυษڧத)

5. 5.

   Meetup Kansai U30 #2 ͜Ε·Ͱ • தʙେن໛ͷίʔϙϨʔταΠτ • ޙ೔ෳ਺ճߋ৽༗ΓͷLP ɹͷ࣮૷Λͯ͠·ͨ͠

6. 6.

   Meetup Kansai U30 #2 ͜Ε·Ͱ • σβΠϯʹରԠ͢ΔͨΊϑϧεΫϥον • CSSϝλݴޠ͸SassΛ࢖༻ •

   FLOCSS + Atomic Design • Codekit -> gulp(node-sass)
7. 7.

   Meetup Kansai U30 #2 σβΠϯʹରԠ͢ΔͨΊ
 ϑϧεΫϥον σβΠφʔ͕දݱ͍ͨ͠ܗʹσβΠϯ͠ɺͦΕΛ ࣮૷͢Δελϯε ※σβΠφʔ΋ͳΜͱͳ࣮͘૷Λ෼͔͍ͬͯΔ ※࣮૷Ͱ͖Δ͔ෆ҆ͳͱ͖͸૬ஊ͢Δ(ਓ΋͍ͨ)

   ͜Ε·Ͱ
8. 8.

   Meetup Kansai U30 #2 CSSϝλݴޠ͸SassΛ࢖༻ ࢿྉͷ๛෋͞ͱशಘͷ͠΍͔͢͞ΒSassΛ࢖༻ ͜Ε·Ͱ

9. 9.

   Meetup Kansai U30 #2 FLOCSS + Atomic Design • FLOCSSͷϨΠϠʔͷ෼͚ํ͕ྑ͔ͬͨ


   https://github.com/hiloki/flocss • component ϨΠϠʔ͕๲ΒΈ͗͢ΔͨΊ
 Atomic Designͷࢥ૝Ͱ෼ׂ • BEMʹΑΔ֊૚ߏ଄ͷࢹ֮Խ ͜Ε·Ͱ
10. 10.

    Meetup Kansai U30 #2 Codekit ͔Β gulp(node-sass) ΁ • GUIͰઃఆͰ͖ΔͨΊָͱ͍͏੠

    • git Ͱ branch Λ੾Γସ͑Δ౓ʹ config ϑΝΠϧ͕ ߋ৽͞ΕΔ • ֎஫͢ΔࡍʹΞϓϦඇॴ࣋໰୊
 => Node.js ͰແঈͰ୭Ͱ΋࡞ΕΔ؀ڥʹ ͜Ε·Ͱ
11. 11.

    Meetup Kansai U30 #2 ͜Ε͔Βͷ࣮૷Ͱߟ͑Δ͜ͱ • WebαΠτͰ͸ͳ͘WebγεςϜͷ࣮૷ • ௕ظతͳӡ༻ •

    ϝϯόʔͷCSSशख़౓Λߟྀ • ݟͨ໨ΑΓ·ͣػೳʹϦιʔεΛׂ͘
12. 12.

    Meetup Kansai U30 #2 ͜Ε͔Βͷ࣮૷(ߟ͑த) • CSSϑϨʔϜϫʔΫΛ࠾༻ • ઃܭ͸FLOCSSϕʔε

13. 13.

    Meetup Kansai U30 #2 CSSϑϨʔϜϫʔΫΛ࠾༻ • υΩϡϝϯτ͕͋Δ΋ͷΛ࢖༻͢Δ
 ͜ͱͰޙʑͷฤूΛ΍Γ΍͘͢ • Foundation,

    UI Kit, Bluma
14. 14.

    Meetup Kansai U30 #2 ઃܭ͸FLOCSSϕʔεʹ • Ҏલ·Ͱͷߏ੒Ͱ΍Γ͖ΕΔਓ͕গͳ͍
 => ·ͣ͸FLOCSS(+BEM)ʹ׳ΕΔ •

    ͦ΋ͦ΋͜Ε·Ͱͷߏ੒Ͱ૊·ͳ͖Ό͍ ͚ͳ͍΋ͷ͕গͳͦ͏ʁ
15. 15.

    Meetup Kansai U30 #2 ͋͘·Ͱϕʔε
 ྟػԠมʹରԠ