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

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

Transcript

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

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

   View Slide

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

   View Slide

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

   View Slide

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

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

   View Slide

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

   View Slide

6. Meetup Kansai U30 #2
   ͜Ε·Ͱ
   • σβΠϯʹରԠ͢ΔͨΊϑϧεΫϥον
   
   • CSSϝλݴޠ͸SassΛ࢖༻
   
   • FLOCSS + Atomic Design
   
   • Codekit -> gulp(node-sass)
   

   View Slide

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

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

   View Slide

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

   View Slide

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

   https://github.com/hiloki/flocss
   
   • component ϨΠϠʔ͕๲ΒΈ͗͢ΔͨΊ

   Atomic Designͷࢥ૝Ͱ෼ׂ
   
   • BEMʹΑΔ֊૚ߏ଄ͷࢹ֮Խ
   ͜Ε·Ͱ
   

   View Slide

10. Meetup Kansai U30 #2
    Codekit ͔Β gulp(node-sass) ΁
    • GUIͰઃఆͰ͖ΔͨΊָͱ͍͏੠
    
    • git Ͱ branch Λ੾Γସ͑Δ౓ʹ config ϑΝΠϧ͕
    ߋ৽͞ΕΔ
    
    • ֎஫͢ΔࡍʹΞϓϦඇॴ࣋໰୊

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

    View Slide

11. Meetup Kansai U30 #2
    ͜Ε͔Βͷ࣮૷Ͱߟ͑Δ͜ͱ
    • WebαΠτͰ͸ͳ͘WebγεςϜͷ࣮૷
    
    • ௕ظతͳӡ༻
    
    • ϝϯόʔͷCSSशख़౓Λߟྀ
    
    • ݟͨ໨ΑΓ·ͣػೳʹϦιʔεΛׂ͘
    

    View Slide

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

    View Slide

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

    ͜ͱͰޙʑͷฤूΛ΍Γ΍͘͢
    
    • Foundation, UI Kit, Bluma
    

    View Slide

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

    => ·ͣ͸FLOCSS(+BEM)ʹ׳ΕΔ
    
    • ͦ΋ͦ΋͜Ε·Ͱͷߏ੒Ͱ૊·ͳ͖Ό͍
    ͚ͳ͍΋ͷ͕গͳͦ͏ʁ
    

    View Slide

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

    ྟػԠมʹରԠ
    

    View Slide