CSS in JS と CSS Modules

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

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

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
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 Λॻ͘Ϣʔβʔࣗ਎ͷεΩϧෆ଍΍ɺϓϩδΣΫτʹ͓͚ΔυΩϡϝϯτෆ଍ͳͲʹ΋ݪҼ͸͋Γ·͢ɻ
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 ͷύϫϑϧͳ෦෼͕٘ਜ਼ʹͳͬͯ͠·͍ͬͯΔɻ
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!