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

Transcript

1. 1.

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

2. 2.

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

3. 3.

   ίϯϙʔωϯτࢦ޲ • ৼΔ෣͍ (JavaScript) ͱ ߏ଄ (HTML) Λ
 ͻͱͭͷίϯϙʔωϯτͱͯ͠هड़Ͱ͖ͯศར •

   มߋ͠΍͍͢ • ࠶ར༻͠΍͍͢
4. 4.

   ߏ଄ ৼΔ෣͍

5. 5.

   ݟͨ໨ (CSS) Ͱ΋
 ίϯϙʔωϯτࢦ޲͍ͨ͠ʂ ͋ͬͪͱͬͪ͜Ͱ "ߏ଄" ΋ "ৼΔ෣͍" ΋
 Ұॹ͚ͩͲ౰͍ͨͬͯΔελΠϧ͕ҧͬͯ


   ίϯϙʔωϯτͷݟͨ໨่͕ΕΔ
 
 Λ๷͍͗ͨ
6. 6.

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

7. 7.

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

8. 8.

   ดͨ͡ CSS Λॻ͘ํ๏ 4બ

9. 9.

   1. Shadow DOM • Web Components ͷ࢓༷ͷͻͱͭ • Polymer ࢖͑͹ಈ͘

   • Chrome ͱ Firefox Ͱ͸࣮૷͞Ε͍ͯΔ
10. 10.

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

11. 11.

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

12. 12.

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

    Electron ͰͳΒ࢖͑ͦ͏
13. 13.

    2. CSS in JS • ίϯϙʔωϯτʹ௚઀ελΠϧΛهड़͢Δ • React: CSS in

    JS • React ίϯϙʔωϯτʹ௚ॻ͖ • Radium • (ଞʹ΋͍͔ͭ͘πʔϧ͸͋Δׂ͕Ѫ)
14. 14.

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

15. 15.

    2. CSS in JS • ཧ૝తͳΧλνͩͱ͸ࢥ͏͕ɺԿ͔ͱͭΒ͍ • طଘ CSS ͔ΒͷҠߦ͕μϧ͍

    • ಉ͡ϑΝΠϧʹελΠϧ·Ͱॻ͍ͪΌ͏ͱ
 ίϯϙʔωϯτͷݟӫ͕͑Α͘ͳ͍ • ࢠཁૉʹΫϥε͚ͭΔͷखؒ • ٖࣅཁૉ΍ϝσΟΞΫΤϦ͕࢖͑ͳ͍
16. 16.

    3. ໋໊ن໿ͰറΔ • OOCSS, BEM, SMACSS, FLOCSS ͳͲ • CSS

    ʹடংΛ΋ͨΒͨ͢Ίͷઃܭख๏ • CSS ͷϧʔϧΛΧςΰϥΠζ͢Δ • ΧςΰϦ͝ͱͷنଇʹैͬͯΫϥε໊͕ܾ·Δ
17. 17.

    ྫɿ SMACSS • Base: ཁૉͦͷ΋ͷͷελΠϧ • Layout: ϖʔδΛ෼ׂ͢ΔελΠϧ • Module:

    ࠶ར༻Մೳͳύʔπ • State: Layout ΍ Module ͷঢ়ଶ • Theme: αΠτશମͷ৭΍େ͖͞ͳͲͷςʔϚ ίϯϙʔωϯτͱ
    ର
    ʹ͢Δͱྑ͍
18. 18.

    3. ໋໊ن໿ͰറΔ • ϕλʔͳํ๏ͬΆ͍ • ͘΍͍͠ (ཁग़య) • ʮӡ༻ͰΧόʔʯͰଥڠͯ͠Δײͳ͍Ͱ͔͢ •

    ͍ͪͲ໋໊ن໿ΛറΔͱมߋͮ͠Β͍ • ࡞Γ࢝Ίʹ໋໊ن໿Ͱ೰Ήͷ΋͍ͬͨͳ͍ • ΋ͬͱΧδϡΞϧʹॻ͍͍͖͍ͯͨ
19. 19.

    4. CSS Modules • Ϋϥε໊ΛϋογϡԽ͢Δ͜ͱʹΑͬͯ
 (࣮࣭) ϩʔΧϧείʔϓʹͳΔ • webpack ͷ

    css-loader Λ࢖͏ͱ؆୯ • Browserify ൛͸ highly experimental • (ͦΕҎ֎͸Α͘Θ͔Βͳ͍)
20. 20.

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

21. 21.

    CSS Modules • ࠓ·ͰͲ͓Γͷ CSS Λॻ͘ײ͡Ͱ CSS in JS Ͱ͖Δ

    • ໋໊ن໿ͱ͔ߟ͑ͣʹϩʔΧϧείʔϓʹͰ͖Δ • ࡶʹ CSS ॻ͚ͯ࠷ߴ • webpack ࢖ͬͯΔͳΒ΋͏͜ΕͰ͍͍ͷͰ͸ʁ
22. 22.

    ดͨ͡ CSS Λॻ͘ํ๏ 1. Shadow DOM 2. CSS in JS

    3. ໋໊ن໿ͰറΔ 4. CSS Modules
23. 23.

    ·ͱΊɿ ดͨ͡ CSS Λॻ͘ํ๏ • webpack ͳΒ css-loader ࢖͑͹Αͦ͞͏ •

    ͦΕҎ֎͸໋໊ن໿ͰറΔͷ͕ແ೉ • ಛघͳέʔε (Electron ͱ͔) Ͱ͋Ε͹
 Shadow DOM Λ࢖ͬͯΈͯ΋͍͍͔΋
24. 24.

    ΍ͬͯͯࢥͬͨ͜ͱ • ͪΌΜͱίϯϙʔωϯτઃܭ͓͚ͯ͠͹
 CSS Λॻ͘ͷ͸ͥΜͥΜͭΒ͘ͳ͍ • ઃܭ΋ָͩ͠ɺมߋ΋༰қ • ٕज़΍πʔϧͷྲྀߦΓഇΓ͸͋ΕͲɺ
 ίϯϙʔωϯτࢦ޲ͷߟ͑ํͦͷ΋ͷ͸


    ഇΕΔ͜ͱ͸ͳ͍͸ͣ
25. 25.

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