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

CSS in JS と CSS Modules

CSS in JS と CSS Modules

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

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

Yoshihide Jimbo

November 22, 2015
Tweet

More Decks by Yoshihide Jimbo

Other Decks in Technology

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