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

コンポーネント時代の CSS 設計 / Modern CSS Design

コンポーネント時代の CSS 設計 / Modern CSS Design

Yuki Ishikawa

March 11, 2016
Tweet

More Decks by Yuki Ishikawa

Other Decks in Technology

Transcript

  1. ίϯϙʔωϯτ࣌୅ͷ
    CSS ઃܭ
    Gotanda.js #3

    View Slide

  2. @hoto17296
    • גࣜձࣾΨΠΞοΫε
    • Gotanda.js ओ࠻

    View Slide

  3. ίϯϙʔωϯτࢦ޲
    • ৼΔ෣͍ (JavaScript) ͱ ߏ଄ (HTML) Λ

    ͻͱͭͷίϯϙʔωϯτͱͯ͠هड़Ͱ͖ͯศར
    • มߋ͠΍͍͢
    • ࠶ར༻͠΍͍͢

    View Slide

  4. ߏ଄
    ৼΔ෣͍

    View Slide

  5. ݟͨ໨ (CSS) Ͱ΋

    ίϯϙʔωϯτࢦ޲͍ͨ͠ʂ
    ͋ͬͪͱͬͪ͜Ͱ "ߏ଄" ΋ "ৼΔ෣͍" ΋

    Ұॹ͚ͩͲ౰͍ͨͬͯΔελΠϧ͕ҧͬͯ

    ίϯϙʔωϯτͷݟͨ໨่͕ΕΔ


    Λ๷͍͗ͨ

    View Slide

  6. CSS ͷείʔϓ໰୊
    CSS ͸άϩʔόϧείʔϓͰ͔͠ఆٛͰ͖ͳ͍
    มߋΛՃ͑ΔͱͲ͜ʹӨڹ͢Δ͔Θ͔Βͳ͍

    View Slide

  7. CSS ͷείʔϓ໰୊
    ด͡Δ͜ͱ͕Ͱ͖ͳ͚Ε͹
    ίϯϙʔωϯτࢦ޲Ͱ͸ͳ͍
    ดͨ͡ CSS Λॻ͘͜ͱ͕Ͱ͖Ε͹
    ίϯϙʔωϯτࢦ޲Ͱ͖Δ (ʁ)

    View Slide

  8. ดͨ͡ CSS Λॻ͘ํ๏
    4બ

    View Slide

  9. 1. Shadow DOM
    • Web Components ͷ࢓༷ͷͻͱͭ
    • Polymer ࢖͑͹ಈ͘
    • Chrome ͱ Firefox Ͱ͸࣮૷͞Ε͍ͯΔ

    View Slide

  10. ྫɿ video ཁૉͷίϯτϩʔϥ

    View Slide

  11. ྫɿ video ཁૉͷίϯτϩʔϥ

    View Slide

  12. 1. Shadow DOM
    • ࣅඇ͡Όͳ͘Ϛδ΋ΜͷϩʔΧϧείʔϓ
    • ເ΋ෆ҆΋ͨ͘͞Μ٧·͍ͬͯΔ
    • ۀ຿Ͱ࢖͏ͷ͸·༷ͩࢠݟ͍ͨ͠ؾ࣋ͪ
    • Electron ͰͳΒ࢖͑ͦ͏

    View Slide

  13. 2. CSS in JS
    • ίϯϙʔωϯτʹ௚઀ελΠϧΛهड़͢Δ
    • React: CSS in JS
    • React ίϯϙʔωϯτʹ௚ॻ͖
    • Radium
    • (ଞʹ΋͍͔ͭ͘πʔϧ͸͋Δׂ͕Ѫ)

    View Slide

  14. +4ΦϒδΣΫτ
    ͱͯ͠ελΠϧΛ
    ॻ͘
    ద༻
    ྫɿ React ίϯϙʔωϯτʹ௚ॻ͖

    View Slide

  15. 2. CSS in JS
    • ཧ૝తͳΧλνͩͱ͸ࢥ͏͕ɺԿ͔ͱͭΒ͍
    • طଘ CSS ͔ΒͷҠߦ͕μϧ͍
    • ಉ͡ϑΝΠϧʹελΠϧ·Ͱॻ͍ͪΌ͏ͱ

    ίϯϙʔωϯτͷݟӫ͕͑Α͘ͳ͍
    • ࢠཁૉʹΫϥε͚ͭΔͷखؒ
    • ٖࣅཁૉ΍ϝσΟΞΫΤϦ͕࢖͑ͳ͍

    View Slide

  16. 3. ໋໊ن໿ͰറΔ
    • OOCSS, BEM, SMACSS, FLOCSS ͳͲ
    • CSS ʹடংΛ΋ͨΒͨ͢Ίͷઃܭख๏
    • CSS ͷϧʔϧΛΧςΰϥΠζ͢Δ
    • ΧςΰϦ͝ͱͷنଇʹैͬͯΫϥε໊͕ܾ·Δ

    View Slide

  17. ྫɿ SMACSS
    • Base: ཁૉͦͷ΋ͷͷελΠϧ
    • Layout: ϖʔδΛ෼ׂ͢ΔελΠϧ
    • Module: ࠶ར༻Մೳͳύʔπ
    • State: Layout ΍ Module ͷঢ়ଶ
    • Theme: αΠτશମͷ৭΍େ͖͞ͳͲͷςʔϚ
    ίϯϙʔωϯτͱ
    ରʹ͢Δͱྑ͍

    View Slide

  18. 3. ໋໊ن໿ͰറΔ
    • ϕλʔͳํ๏ͬΆ͍
    • ͘΍͍͠ (ཁग़య)
    • ʮӡ༻ͰΧόʔʯͰଥڠͯ͠Δײͳ͍Ͱ͔͢
    • ͍ͪͲ໋໊ن໿ΛറΔͱมߋͮ͠Β͍
    • ࡞Γ࢝Ίʹ໋໊ن໿Ͱ೰Ήͷ΋͍ͬͨͳ͍
    • ΋ͬͱΧδϡΞϧʹॻ͍͍͖͍ͯͨ

    View Slide

  19. 4. CSS Modules
    • Ϋϥε໊ΛϋογϡԽ͢Δ͜ͱʹΑͬͯ

    (࣮࣭) ϩʔΧϧείʔϓʹͳΔ
    • webpack ͷ css-loader Λ࢖͏ͱ؆୯
    • Browserify ൛͸ highly experimental
    • (ͦΕҎ֎͸Α͘Θ͔Βͳ͍)

    View Slide

  20. FYQPSU
    DPNQJMF
    ద༻
    ʊਓਓਓਓਓʊ
    ʼɹ͍͢͝ɹʻ
    ʉ:?:?:?:ʉ

    View Slide

  21. CSS Modules
    • ࠓ·ͰͲ͓Γͷ CSS Λॻ͘ײ͡Ͱ CSS in JS Ͱ͖Δ
    • ໋໊ن໿ͱ͔ߟ͑ͣʹϩʔΧϧείʔϓʹͰ͖Δ
    • ࡶʹ CSS ॻ͚ͯ࠷ߴ
    • webpack ࢖ͬͯΔͳΒ΋͏͜ΕͰ͍͍ͷͰ͸ʁ

    View Slide

  22. ดͨ͡ CSS Λॻ͘ํ๏
    1. Shadow DOM
    2. CSS in JS
    3. ໋໊ن໿ͰറΔ
    4. CSS Modules

    View Slide

  23. ·ͱΊɿ ดͨ͡ CSS Λॻ͘ํ๏
    • webpack ͳΒ css-loader ࢖͑͹Αͦ͞͏
    • ͦΕҎ֎͸໋໊ن໿ͰറΔͷ͕ແ೉
    • ಛघͳέʔε (Electron ͱ͔) Ͱ͋Ε͹

    Shadow DOM Λ࢖ͬͯΈͯ΋͍͍͔΋

    View Slide

  24. ΍ͬͯͯࢥͬͨ͜ͱ
    • ͪΌΜͱίϯϙʔωϯτઃܭ͓͚ͯ͠͹

    CSS Λॻ͘ͷ͸ͥΜͥΜͭΒ͘ͳ͍
    • ઃܭ΋ָͩ͠ɺมߋ΋༰қ
    • ٕज़΍πʔϧͷྲྀߦΓഇΓ͸͋ΕͲɺ

    ίϯϙʔωϯτࢦ޲ͷߟ͑ํͦͷ΋ͷ͸

    ഇΕΔ͜ͱ͸ͳ͍͸ͣ

    View Slide

  25. ίϯϙʔωϯτࢦ޲͸
    ͍͍ͧ (^ω^)

    View Slide