Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Daisuke Konishi

December 02, 2017
Tweet

More Decks by Daisuke Konishi

Other Decks in Programming

Transcript

  1. Meetup Kansai U30 #2
    ࠷ۙ΍ͬͨCSSͷઃܭͱ

    ΍ͬͯΈͯײͨ͜͡ͱ
    Daisuke KONISHI

    View full-size slide

  2. Meetup Kansai U30 #2
    Daisuke KONISHI
    @skd_nw
    coroutine inc. / WebΤϯδχΞ
    WordBenchژ౎ ϞσϨʔλʔ

    CSSϑϨϯζ

    View full-size slide

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

    View full-size slide

  4. Meetup Kansai U30 #2
    ࠷ۙస৬͠·ͨ͠
    ϚʔΫΞοϓΤϯδχΞ

    ɹˣ

    WebΤϯδχΞ

    (WebϑϩϯτΤϯυଟΊ
    αʔόʔαΠυษڧத)

    View full-size slide

  5. Meetup Kansai U30 #2
    ͜Ε·Ͱ
    • தʙେن໛ͷίʔϙϨʔταΠτ

    • ޙ೔ෳ਺ճߋ৽༗ΓͷLP

    ɹͷ࣮૷Λͯ͠·ͨ͠

    View full-size slide

  6. Meetup Kansai U30 #2
    ͜Ε·Ͱ
    • σβΠϯʹରԠ͢ΔͨΊϑϧεΫϥον

    • CSSϝλݴޠ͸SassΛ࢖༻

    • FLOCSS + Atomic Design

    • Codekit -> gulp(node-sass)

    View full-size slide

  7. Meetup Kansai U30 #2
    σβΠϯʹରԠ͢ΔͨΊ

    ϑϧεΫϥον
    σβΠφʔ͕දݱ͍ͨ͠ܗʹσβΠϯ͠ɺͦΕΛ
    ࣮૷͢Δελϯε

    ※σβΠφʔ΋ͳΜͱͳ࣮͘૷Λ෼͔͍ͬͯΔ

    ※࣮૷Ͱ͖Δ͔ෆ҆ͳͱ͖͸૬ஊ͢Δ(ਓ΋͍ͨ)
    ͜Ε·Ͱ

    View full-size slide

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

    View full-size slide

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

    https://github.com/hiloki/flocss

    • component ϨΠϠʔ͕๲ΒΈ͗͢ΔͨΊ

    Atomic Designͷࢥ૝Ͱ෼ׂ

    • BEMʹΑΔ֊૚ߏ଄ͷࢹ֮Խ
    ͜Ε·Ͱ

    View full-size slide

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

    • git Ͱ branch Λ੾Γସ͑Δ౓ʹ config ϑΝΠϧ͕
    ߋ৽͞ΕΔ

    • ֎஫͢ΔࡍʹΞϓϦඇॴ࣋໰୊

    => Node.js ͰແঈͰ୭Ͱ΋࡞ΕΔ؀ڥʹ
    ͜Ε·Ͱ

    View full-size slide

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

    • ௕ظతͳӡ༻

    • ϝϯόʔͷCSSशख़౓Λߟྀ

    • ݟͨ໨ΑΓ·ͣػೳʹϦιʔεΛׂ͘

    View full-size slide

  12. Meetup Kansai U30 #2
    ͜Ε͔Βͷ࣮૷(ߟ͑த)
    • CSSϑϨʔϜϫʔΫΛ࠾༻

    • ઃܭ͸FLOCSSϕʔε

    View full-size slide

  13. Meetup Kansai U30 #2
    CSSϑϨʔϜϫʔΫΛ࠾༻
    • υΩϡϝϯτ͕͋Δ΋ͷΛ࢖༻͢Δ

    ͜ͱͰޙʑͷฤूΛ΍Γ΍͘͢

    • Foundation, UI Kit, Bluma

    View full-size slide

  14. Meetup Kansai U30 #2
    ઃܭ͸FLOCSSϕʔεʹ
    • Ҏલ·Ͱͷߏ੒Ͱ΍Γ͖ΕΔਓ͕গͳ͍

    => ·ͣ͸FLOCSS(+BEM)ʹ׳ΕΔ

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

    View full-size slide

  15. Meetup Kansai U30 #2
    ͋͘·Ͱϕʔε

    ྟػԠมʹରԠ

    View full-size slide