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

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

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

Avatar for Yuki Ishikawa

Yuki Ishikawa

March 11, 2016
Tweet

More Decks by Yuki Ishikawa

Other Decks in Technology

Transcript

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

    JS • React ίϯϙʔωϯτʹ௚ॻ͖ • Radium • (ଞʹ΋͍͔ͭ͘πʔϧ͸͋Δׂ͕Ѫ)
  2. 2. CSS in JS • ཧ૝తͳΧλνͩͱ͸ࢥ͏͕ɺԿ͔ͱͭΒ͍ • طଘ CSS ͔ΒͷҠߦ͕μϧ͍

    • ಉ͡ϑΝΠϧʹελΠϧ·Ͱॻ͍ͪΌ͏ͱ
 ίϯϙʔωϯτͷݟӫ͕͑Α͘ͳ͍ • ࢠཁૉʹΫϥε͚ͭΔͷखؒ • ٖࣅཁૉ΍ϝσΟΞΫΤϦ͕࢖͑ͳ͍
  3. 3. ໋໊ن໿ͰറΔ • OOCSS, BEM, SMACSS, FLOCSS ͳͲ • CSS

    ʹடংΛ΋ͨΒͨ͢Ίͷઃܭख๏ • CSS ͷϧʔϧΛΧςΰϥΠζ͢Δ • ΧςΰϦ͝ͱͷنଇʹैͬͯΫϥε໊͕ܾ·Δ
  4. ྫɿ SMACSS • Base: ཁૉͦͷ΋ͷͷελΠϧ • Layout: ϖʔδΛ෼ׂ͢ΔελΠϧ • Module:

    ࠶ར༻Մೳͳύʔπ • State: Layout ΍ Module ͷঢ়ଶ • Theme: αΠτશମͷ৭΍େ͖͞ͳͲͷςʔϚ ίϯϙʔωϯτͱ ରʹ͢Δͱྑ͍
  5. 3. ໋໊ن໿ͰറΔ • ϕλʔͳํ๏ͬΆ͍ • ͘΍͍͠ (ཁग़య) • ʮӡ༻ͰΧόʔʯͰଥڠͯ͠Δײͳ͍Ͱ͔͢ •

    ͍ͪͲ໋໊ن໿ΛറΔͱมߋͮ͠Β͍ • ࡞Γ࢝Ίʹ໋໊ن໿Ͱ೰Ήͷ΋͍ͬͨͳ͍ • ΋ͬͱΧδϡΞϧʹॻ͍͍͖͍ͯͨ
  6. 4. CSS Modules • Ϋϥε໊ΛϋογϡԽ͢Δ͜ͱʹΑͬͯ
 (࣮࣭) ϩʔΧϧείʔϓʹͳΔ • webpack ͷ

    css-loader Λ࢖͏ͱ؆୯ • Browserify ൛͸ highly experimental • (ͦΕҎ֎͸Α͘Θ͔Βͳ͍)
  7. CSS Modules • ࠓ·ͰͲ͓Γͷ CSS Λॻ͘ײ͡Ͱ CSS in JS Ͱ͖Δ

    • ໋໊ن໿ͱ͔ߟ͑ͣʹϩʔΧϧείʔϓʹͰ͖Δ • ࡶʹ CSS ॻ͚ͯ࠷ߴ • webpack ࢖ͬͯΔͳΒ΋͏͜ΕͰ͍͍ͷͰ͸ʁ
  8. ดͨ͡ CSS Λॻ͘ํ๏ 1. Shadow DOM 2. CSS in JS

    3. ໋໊ن໿ͰറΔ 4. CSS Modules
  9. ·ͱΊɿ ดͨ͡ CSS Λॻ͘ํ๏ • webpack ͳΒ css-loader ࢖͑͹Αͦ͞͏ •

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