Pro Yearly is on sale from $80 to $50! »

CSS in JS と CSS Modules

CSS in JS と CSS Modules

ng-kyoto 主催「ng-kyoto Angular Meetup #3」での発表資料です。

http://ng-kyoto.connpass.com/event/20512/

790f55ccde7a62df8f25747586657090?s=128

Yoshihide Jimbo

November 22, 2015
Tweet

Transcript

  1. CSS in JS ͱ CSS Modules Yoshihide Jimbo ng-kyoto Angular

    Meetup #3 | Nov 22, 2015
  2. @jmblog Front-end engineer Working at Kaizen Platform Yoshihide Jimbo

  3. None
  4. What is CSS?

  5. CSS Cascading Style Sheets ΧεέʔσΟϯάɾελΠϧγʔτ =

  6. What is Cascading? ΧεέʔσΟϯάͬͯͳʹʁ

  7. ← ← ←

  8. ΧεέʔσΟϯάͱ͸ ͋Δཁૉʹରͯ͠ɺॏෳͨ͠ελΠϧͷఆ͕ٛଘࡏ͢Δ৔߹ɺ • ॏΈ (Weight) • ৄࡉ౓ (Specificity) • એݴॱ

    (Source Order) Λݩʹɺͦͷ͏ͪ 1 ͚ͭͩΛ༗ޮʹ͢Δ࢓૊Έͷ͜ͱɻ
 ʢಛʹৄࡉ౓͕ϙΠϯτɻʣ
  9. CSS is too fragile CSS ͸յΕ΍͍͢

  10. ͳͥʮCSS ͸յΕ΍͍͢ʯͷ͔ʁ ݪҼͷҰͭ͸ɺCSS ͷݴޠ࢓༷ͦͷ΋ͷʹ͋Δɻ • ΧεέʔσΟϯάʢಛʹৄࡉ౓ʣ͕෼͔Γʹ͍͘ • ͦΕͧΕͷελΠϧఆ͕ٛෳࡶʹґଘ͠߹͍ͬͯΔ • ʹ΋ؔΘΒͣɺάϩʔόϧͳ໊લۭ͔ؒ͠ͳ͍

    • ͭ·ΓɺҰͭͷڊେͳґଘؔ܎ͷπϦʔΛѻΘͳ͚Ε͹ͳΒͳ͍ 
 άϩʔόϧม਺͔͠࢖͑ͳ͍ϓϩάϥϛϯάݴޠͰιϑτ΢ΤΞΛ։ൃ͢Δ Α͏ͳ΋ͷ ※ ΋ͪΖΜɺCSS Λॻ͘Ϣʔβʔࣗ਎ͷεΩϧෆ଍΍ɺϓϩδΣΫτʹ͓͚ΔυΩϡϝϯτෆ଍ͳͲʹ΋ݪҼ͸͋Γ·͢ɻ
  11. None
  12. ʮCSS ͕μϝͳΒɺJS Λ࢖͑͹͍͍͡Όͳ͍ʯ

  13. CSS in JS

  14. 2014೥11݄ʹ Christopher Chedeau ࢯ͕ʮReact: CSS in JSʯΛൃදɻ CSS in JS

    https:/ /speakerdeck.com/vjeux/react-css-in-js
  15. ͜ΕΛ͖͔͚ͬʹ༷ʑͳ࣮૷͕஀ੜɻ CSS in JS https:/ /github.com/MicheleBertoli/css-in-js

  16. react-style Λ࢖࣮ͬͨ૷ྫ

  17. ࣮૷ྫ 1. ίϯϙʔωϯτ͝ͱͷελΠϧΛ CSS Ͱ͸ͳ͘ JS Ͱఆٛ͢Δ var StyleSheet =

    require('react-style'); var React = require('react'); var styles = StyleSheet.create({ normal: { color: 'rgba(0, 0, 0, .7)', backgroundColor: '#e6e6e6' } }); JS ※ʮPostCSS JSʯ(https:/ /github.com/postcss/postcss-js) ͱ͍͏ PostCSS ϓϥάΠϯΛ࢖͏ͱɺCSS ͔Β CSS in JS ༻ͷ JS ΦϒδΣΫτʹม׵͢Δ͜ͱ͕Ͱ͖ΔͷͰɺελΠϧఆٛΛ CSS Ͱॻ͘͜ͱ΋ՄೳɻͦͷࡍɺAutoprefixer ͳ Ͳଞͷ PostCSS ϓϥάΠϯͷॲཧΛڬΉ͜ͱ΋Ͱ͖Δɻ
  18. ࣮૷ྫ 2. ఆٛͨ͠ίϯϙʔωϯτͷελΠϧΛΠϯϥΠϯ (style="") ʹల։͢Δ JS var StyleSheet = require('react-style');

    var React = require('react'); var styles = StyleSheet.create({ normal: { color: 'rgba(0, 0, 0, .7)', backgroundColor: '#e6e6e6' } }); class HelloWorld extends React.Component { render() { return <div styles={styles.normal}>Hello World!</div> } } ※ ্هͷྫͰ͸ react-style ͷ࢓༷ʹΑΓɺଐੑ໊͕ style Ͱ͸ͳ͘ styles ʹͳ͍ͬͯΔɻ
  19. ࣮૷ྫ 3. ݁ՌɺҎԼͷ༷ͳ HTML ͕ग़ྗ͞ΕΔ HTML <div style="color: #333; background-color:

    #e6e6e6">Hello World!</div>
  20. CSS in JS ͷಛ௃

  21. CSS in JS ͷಛ௃ 1. ελΠϧఆٛΛ JS ͷϩʔΧϧม਺ʹด͡ࠐΊΔ͜ͱͰɺଞͷελΠϧ͔Βͷҙ ਤ͠ͳ͍ԚછΛ๷͙͜ͱ͕Ͱ͖Δɻ ʹ

    ίϯϙʔωϯτ୯ҐͰϩʔΧϧείʔϓʹͳΔɻ 2. ΠϯϥΠϯελΠϧΛ࢖͏͜ͱͰɺৄࡉ౓͕ҰఆʹͳΔɻ ʹ ΧεέʔσΟϯάΛؾʹ͠ͳͯ͘ࡁΉΑ͏ʹͳΔɻ
  22. CSS in JS ͷ໰୊఺

  23. CSS in JS ͷ໰୊఺ ελΠϧΛશͯΠϯϥΠϯʹల։͢Δ = ΠϯϥΠϯελΠϧͷ੍໿Λड͚Δ • ٖࣅΫϥεʢ:hoverɺ:nth-childɺ:not ͳͲʣ

    • ϝσΟΞΫΤϦ • CSS Ξχϝʔγϣϯ ͳͲ͕࢖͑ͳ͍ɻ ※ :hover ͳͲҰ෦ͷٖࣅΫϥε΍ ϝσΟΞΫΤϦ ʹ͍ͭͯ͸ɺؤுͬͯରԠ͍ͯ͠Δ࣮૷ϥΠϒϥϦ΋͋Δɻ :hover → onMouseEnter / onMouseLeave :focus → onFocus / onBlur ϝσΟΞΫΤϦ → window.matchMedia
  24. ͭ·Γ CSS ͷඇྗͳ෦෼͸ JS ͰղܾͰ͖͍ͯΔ͕ɺ
 CSS ͷύϫϑϧͳ෦෼͕٘ਜ਼ʹͳͬͯ͠·͍ͬͯΔɻ

  25. None
  26. ʮCSS ͷྑ͍఺΋͢΂ͯ࢒ͤΔΑ͏ʹ͠Α͏ʯ

  27. https:/ /github.com/css-modules/css-modules

  28. ࣮૷ྫ

  29. ࣮૷ྫ 1. ίϯϙʔωϯτ͝ͱͷελΠϧΛ CSS Ͱॻ͘ .normal { /* all styles

    for Normal */ } .primary { /* all styles for Primary */ } components/button.css JS in CSS ͱ͸ҟͳΓɺελΠϧఆٛ͸ CSS Ͱॻ͘͜ͱ͕Ͱ͖Δɻ
  30. ࣮૷ྫ 2. JS Ͱ CSS ϑΝΠϧΛ import ͯ͠ɺ࢖͍͍ͨΫϥε໊Ληοτ͢Δ import styles

    from './button.css'; buttonElm.outerHTML = `<button class="${styles.primary}">Submit</button>"`; components/button.js .normal { /* all styles for Normal */ } .primary { /* all styles for Primary */ } components/button.css
  31. ࣮૷ྫ 3. ͜ΕΒΛίϯύΠϧ͢ΔͱΫϥε໊͕ҰҙʹͳΔΑ͏ʹࣗಈม׵͞ΕΔ .components_button__normal___2_vnF { /* all styles for Normal

    */ } .components_button__primary___16yOh { /* all styles for Primary */ } style.css <button class="components_button__primary___16yOh">Submit</button> HTML ग़ྗ͞ΕΔ HTML ͸͜Μͳײ͡ɻ ※ ίϯύΠϧ͸ Webpack ͷ css-loader Λ࢖͏ͷ͕ҰൠతɻʢBrowserify Ͱ΋ՄೳͬΆ͍ɻʣ
  32. Composition

  33. Composition composes Λ࢖͏ͱ Sass ͷ @extend ͷΑ͏ͳ͜ͱ΋Ͱ͖Δɻ .base { /*

    all styles for Base */ } .normal { composes: base; /* all styles for Normal */ } .primary { composes: base; /* all styles for Primary */ } components/button.css
  34. Composition <button class=“components_button__primary___16yOh components_button__base___xZ-BK">Submit</button> HTML ग़ྗ͞ΕΔ HTML ͸͜Μͳײ͡ɻ

  35. Composition ผͷϑΝΠϧ͔Β compose ͢Δ͜ͱ΋Մೳɻ .primary-color { color: #5fa9ff; } settings/colors.css

    .base { /* all styles for Base */ } .primary { composes: base; composes: primary-color from "../settings/colors.css"; /* all styles for Primary */ } components/button.css
  36. άϩʔόϧείʔϓ

  37. άϩʔόϧείʔϓ ࣗಈม׵ͤͣ͞ʹɺ͜Ε·Ͱ௨Γάϩʔόϧείʔϓʹ͍ͨ͠৔߹͸ :global Λࢦ ఆ͢Δ .normal { /* all styles

    for Normal */ } :global(.large) { /* global styles */ } import styles from './button.css'; buttonElm.outerHTML = '<button class="{styles.normal} large">Submit</button>'; components/button.css components/button.js
  38. CSS Modules ͷಛ௃

  39. CSS Modules ͷಛ௃ 1. શͯͷΫϥεηϨΫλ໊͕ҰҙʹͳΔ͜ͱ͕อূ͞Ε͍ͯΔɻ ʹ ϑΝΠϧ୯ҐͰϩʔΧϧείʔϓʹͳΔɻ 2. ϊʔϚϧͳ CSS

    ͰελΠϧఆ͕ٛͰ͖Δ ʹ CSS ͷೳྗΛ 100% ׆͔͢͜ͱ͕Ͱ͖Δɻ
  40. CSS Modules ͷॴײ

  41. CSS Modules ͷॴײ • ҰҙͱͳΔΫϥε໊ʹ͢Δͱ͍͏ϩʔΧϧείʔϓͷ࢓૊Έࣗମ͸ɺBEM ͳͲ ͷ໋໊نଇΛ΋ͱʹࣗ෼ͰΫϥε໊Λ͚ͭΔͷͱ΍͍ͬͯΔ͜ͱ͸มΘΒͳ͍ɻ • composition ΋

    Sass ͷ @extend ͱมΘΒͳ͍ɻ • ैͬͯɺBEM ΍ SMACSS ͳͲ͜Ε·Ͱͷ CSS ઃܭख๏Ͱ͏·͍͍ͬͯ͘Δ৔ ߹͸ɺ͋͑ͯಋೖ͢Δඞવੑ͸ͳ͍͔΋͠Εͳ͍ɻ • Ͱ΋ࣗಈͰ BEM ͬΆ͍Ϋϥε໊Λੜ੒ͯ͘͠ΕΔͷ͸خ͍͠ɻʮ΍΍໋͍͜͠ ໊نଇͰΫϥε໊Λߟ͑Δͷ͸໘౗ͩʯͱ͍͏ਓʹ͸ͪΐ͏Ͳ͍͍͔΋ɻ
  42. Ͱ΋Ͷɾɾɾ

  43. Ͱ΋Ͷɾɾɾ • ࠷΋ॏཁͳͷ͸ʮ͖Ε͍ͳίϯϙʔωϯτઃܭ͕Ͱ͖Δ͔Ͳ͏͔ʯͩͱࢥ͏ɻ • ͦΕ͕Ͱ͖͍ͯͳ͍ͱɺͨͱ͑ CSS Modules Λ࢖ͬͨͱͯ͠΋ɺଞͷελΠϧ Λ composes

    ͠·ͬͯ͘ɺ݁ہʮյΕ΍͍͢ CSSʯʹͳͬͯ͠·͏ɻ • ٯʹɺͦΕ͑͞Ͱ͖͍ͯ͑͞Ε͹ɺBEM Ͱ΋ CSS Modules Ͱ΋ԿͰ΋ߏΘͳ ͍ɻ • ݸਓతʹ͸ɺͲ͏͢Ε͹͖Ε͍ʹίϯϙʔωϯτ෼ׂͰ͖Δ͔ͱ͍͏͜ͱͰɺ೔ʑ ೰ΜͰ͓Γ·͢ɻ
  44. ·ͱΊ

  45. ·ͱΊ • CSS in JS ͸࢖͑ͳ͍͚ͲͦͷޙͷӨڹΛߟ͑Δͱྺ࢙తͳҙٛ͸େ͖͍ɻ • CSS Modules ͸ͳ͔ͳ͔ྑ͛͞ɻಛʹ

    React ΍ΔͳΒݕ౼͢ΔՁ஋͋Γɻ • ͪͳΈʹɺCSS in JS ΋ CSS Modules ΋React Ϣʔβʔ͕ߟ͑ͨ΋ͷɻ • Angular Ϣʔβʔɺ΋ͬͱ͕Μ͹Εɻ • Angular2 ʹ͸ಉ༷ͷػೳ͕ඪ४Ͱ૊Έࠐ·ΕΔΒ͍͠ɻ͕͢͞ Angularʂ
  46. ͪΐͬͱ͚ͩʹએ఻

  47. Work with us! ҰॹʹੈքΛ KAIZEN ͢ΔϝϯόʔΛٻΊ͍ͯ·͢ʂ

  48. Thanks!