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
   

   View Slide

2. @jmblog
   Front-end engineer
   Working at Kaizen Platform
   Yoshihide Jimbo
   

   View Slide

3. View Slide

4. What is CSS?
   

   View Slide

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

   View Slide

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

   View Slide

7. ←
   ←
   ←
   

   View Slide

8. ΧεέʔσΟϯάͱ͸
   ͋Δཁૉʹରͯ͠ɺॏෳͨ͠ελΠϧͷఆ͕ٛଘࡏ͢Δ৔߹ɺ
   • ॏΈ (Weight)
   • ৄࡉ౓ (Specificity)
   • એݴॱ (Source Order)
   Λݩʹɺͦͷ͏ͪ 1 ͚ͭͩΛ༗ޮʹ͢Δ࢓૊Έͷ͜ͱɻ

   ʢಛʹৄࡉ౓͕ϙΠϯτɻʣ
   

   View Slide

9. CSS is too fragile
   CSS ͸յΕ΍͍͢
   

   View Slide

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

    άϩʔόϧม਺͔͠࢖͑ͳ͍ϓϩάϥϛϯάݴޠͰιϑτ΢ΤΞΛ։ൃ͢Δ
    Α͏ͳ΋ͷ
    ※ ΋ͪΖΜɺCSS Λॻ͘Ϣʔβʔࣗ਎ͷεΩϧෆ଍΍ɺϓϩδΣΫτʹ͓͚ΔυΩϡϝϯτෆ଍ͳͲʹ΋ݪҼ͸͋Γ·͢ɻ
    

    View Slide

11. View Slide

12. ʮCSS ͕μϝͳΒɺJS Λ࢖͑͹͍͍͡Όͳ͍ʯ
    

    View Slide

13. CSS in JS
    

    View Slide

14. 2014೥11݄ʹ Christopher Chedeau ࢯ͕ʮReact: CSS in JSʯΛൃදɻ
    CSS in JS
    https:/
    /speakerdeck.com/vjeux/react-css-in-js
    

    View Slide

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

    View Slide

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

    View Slide

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 ϓϥάΠϯͷॲཧΛڬΉ͜ͱ΋Ͱ͖Δɻ
    

    View Slide

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 Hello World!
    }
    }
    ※ ্هͷྫͰ͸ react-style ͷ࢓༷ʹΑΓɺଐੑ໊͕ style Ͱ͸ͳ͘ styles ʹͳ͍ͬͯΔɻ
    

    View Slide

19. ࣮૷ྫ
    3. ݁ՌɺҎԼͷ༷ͳ HTML ͕ग़ྗ͞ΕΔ
    HTML
    Hello World!
    

    View Slide

20. CSS in JS ͷಛ௃
    

    View Slide

21. CSS in JS ͷಛ௃
    1. ελΠϧఆٛΛ JS ͷϩʔΧϧม਺ʹด͡ࠐΊΔ͜ͱͰɺଞͷελΠϧ͔Βͷҙ
    ਤ͠ͳ͍ԚછΛ๷͙͜ͱ͕Ͱ͖Δɻ
    ʹ ίϯϙʔωϯτ୯ҐͰϩʔΧϧείʔϓʹͳΔɻ
    2. ΠϯϥΠϯελΠϧΛ࢖͏͜ͱͰɺৄࡉ౓͕ҰఆʹͳΔɻ
    ʹ ΧεέʔσΟϯάΛؾʹ͠ͳͯ͘ࡁΉΑ͏ʹͳΔɻ
    

    View Slide

22. CSS in JS ͷ໰୊఺
    

    View Slide

23. CSS in JS ͷ໰୊఺
    ελΠϧΛશͯΠϯϥΠϯʹల։͢Δ = ΠϯϥΠϯελΠϧͷ੍໿Λड͚Δ
    • ٖࣅΫϥεʢ:hoverɺ:nth-childɺ:not ͳͲʣ
    • ϝσΟΞΫΤϦ
    • CSS Ξχϝʔγϣϯ
    ͳͲ͕࢖͑ͳ͍ɻ
    ※ :hover ͳͲҰ෦ͷٖࣅΫϥε΍ ϝσΟΞΫΤϦ ʹ͍ͭͯ͸ɺؤுͬͯରԠ͍ͯ͠Δ࣮૷ϥΠϒϥϦ΋͋Δɻ
    :hover → onMouseEnter / onMouseLeave
    :focus → onFocus / onBlur
    ϝσΟΞΫΤϦ → window.matchMedia
    

    View Slide

24. ͭ·Γ
    CSS ͷඇྗͳ෦෼͸ JS ͰղܾͰ͖͍ͯΔ͕ɺ

    CSS ͷύϫϑϧͳ෦෼͕٘ਜ਼ʹͳͬͯ͠·͍ͬͯΔɻ
    

    View Slide

25. View Slide

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

    View Slide

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

    View Slide

28. ࣮૷ྫ
    

    View Slide

29. ࣮૷ྫ
    1. ίϯϙʔωϯτ͝ͱͷελΠϧΛ CSS Ͱॻ͘
    .normal { /* all styles for Normal */ }
    .primary { /* all styles for Primary */ }
    components/button.css
    JS in CSS ͱ͸ҟͳΓɺελΠϧఆٛ͸ CSS Ͱॻ͘͜ͱ͕Ͱ͖Δɻ
    

    View Slide

30. ࣮૷ྫ
    2. JS Ͱ CSS ϑΝΠϧΛ import ͯ͠ɺ࢖͍͍ͨΫϥε໊Ληοτ͢Δ
    import styles from './button.css';
    buttonElm.outerHTML = `Submit"`;
    components/button.js
    .normal { /* all styles for Normal */ }
    .primary { /* all styles for Primary */ }
    components/button.css
    

    View Slide

31. ࣮૷ྫ
    3. ͜ΕΒΛίϯύΠϧ͢ΔͱΫϥε໊͕ҰҙʹͳΔΑ͏ʹࣗಈม׵͞ΕΔ
    .components_button__normal___2_vnF { /* all styles for Normal */ }
    .components_button__primary___16yOh { /* all styles for Primary */ }
    style.css
    Submit
    HTML
    ग़ྗ͞ΕΔ HTML ͸͜Μͳײ͡ɻ
    ※ ίϯύΠϧ͸ Webpack ͷ css-loader Λ࢖͏ͷ͕ҰൠతɻʢBrowserify Ͱ΋ՄೳͬΆ͍ɻʣ
    

    View Slide

32. Composition
    

    View Slide

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
    

    View Slide

34. Composition
    components_button__base___xZ-BK">Submit
    HTML
    ग़ྗ͞ΕΔ HTML ͸͜Μͳײ͡ɻ
    

    View Slide

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
    

    View Slide

36. άϩʔόϧείʔϓ
    

    View Slide

37. άϩʔόϧείʔϓ
    ࣗಈม׵ͤͣ͞ʹɺ͜Ε·Ͱ௨Γάϩʔόϧείʔϓʹ͍ͨ͠৔߹͸ :global Λࢦ
    ఆ͢Δ
    .normal { /* all styles for Normal */ }
    :global(.large) { /* global styles */ }
    import styles from './button.css';
    buttonElm.outerHTML = 'Submit';
    components/button.css
    components/button.js
    

    View Slide

38. CSS Modules ͷಛ௃
    

    View Slide

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

    View Slide

40. CSS Modules ͷॴײ
    

    View Slide

41. CSS Modules ͷॴײ
    • ҰҙͱͳΔΫϥε໊ʹ͢Δͱ͍͏ϩʔΧϧείʔϓͷ࢓૊Έࣗମ͸ɺBEM ͳͲ
    ͷ໋໊نଇΛ΋ͱʹࣗ෼ͰΫϥε໊Λ͚ͭΔͷͱ΍͍ͬͯΔ͜ͱ͸มΘΒͳ͍ɻ
    • composition ΋ Sass ͷ @extend ͱมΘΒͳ͍ɻ
    • ैͬͯɺBEM ΍ SMACSS ͳͲ͜Ε·Ͱͷ CSS ઃܭख๏Ͱ͏·͍͍ͬͯ͘Δ৔
    ߹͸ɺ͋͑ͯಋೖ͢Δඞવੑ͸ͳ͍͔΋͠Εͳ͍ɻ
    • Ͱ΋ࣗಈͰ BEM ͬΆ͍Ϋϥε໊Λੜ੒ͯ͘͠ΕΔͷ͸خ͍͠ɻʮ΍΍໋͍͜͠
    ໊نଇͰΫϥε໊Λߟ͑Δͷ͸໘౗ͩʯͱ͍͏ਓʹ͸ͪΐ͏Ͳ͍͍͔΋ɻ
    

    View Slide

42. Ͱ΋Ͷɾɾɾ
    

    View Slide

43. Ͱ΋Ͷɾɾɾ
    • ࠷΋ॏཁͳͷ͸ʮ͖Ε͍ͳίϯϙʔωϯτઃܭ͕Ͱ͖Δ͔Ͳ͏͔ʯͩͱࢥ͏ɻ
    • ͦΕ͕Ͱ͖͍ͯͳ͍ͱɺͨͱ͑ CSS Modules Λ࢖ͬͨͱͯ͠΋ɺଞͷελΠϧ
    Λ composes ͠·ͬͯ͘ɺ݁ہʮյΕ΍͍͢ CSSʯʹͳͬͯ͠·͏ɻ
    • ٯʹɺͦΕ͑͞Ͱ͖͍ͯ͑͞Ε͹ɺBEM Ͱ΋ CSS Modules Ͱ΋ԿͰ΋ߏΘͳ
    ͍ɻ
    • ݸਓతʹ͸ɺͲ͏͢Ε͹͖Ε͍ʹίϯϙʔωϯτ෼ׂͰ͖Δ͔ͱ͍͏͜ͱͰɺ೔ʑ
    ೰ΜͰ͓Γ·͢ɻ
    

    View Slide

44. ·ͱΊ
    

    View Slide

45. ·ͱΊ
    • CSS in JS ͸࢖͑ͳ͍͚ͲͦͷޙͷӨڹΛߟ͑Δͱྺ࢙తͳҙٛ͸େ͖͍ɻ
    • CSS Modules ͸ͳ͔ͳ͔ྑ͛͞ɻಛʹ React ΍ΔͳΒݕ౼͢ΔՁ஋͋Γɻ
    • ͪͳΈʹɺCSS in JS ΋ CSS Modules ΋React Ϣʔβʔ͕ߟ͑ͨ΋ͷɻ
    • Angular Ϣʔβʔɺ΋ͬͱ͕Μ͹Εɻ
    • Angular2 ʹ͸ಉ༷ͷػೳ͕ඪ४Ͱ૊Έࠐ·ΕΔΒ͍͠ɻ͕͢͞ Angularʂ
    

    View Slide

46. ͪΐͬͱ͚ͩʹએ఻
    

    View Slide

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

    View Slide

48. Thanks!
    

    View Slide