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

    (Source Order) Λݩʹɺͦͷ͏ͪ 1 ͚ͭͩΛ༗ޮʹ͢Δ࢓૊Έͷ͜ͱɻ
 ʢಛʹৄࡉ౓͕ϙΠϯτɻʣ
  2. ͳͥʮCSS ͸յΕ΍͍͢ʯͷ͔ʁ ݪҼͷҰͭ͸ɺCSS ͷݴޠ࢓༷ͦͷ΋ͷʹ͋Δɻ • ΧεέʔσΟϯάʢಛʹৄࡉ౓ʣ͕෼͔Γʹ͍͘ • ͦΕͧΕͷελΠϧఆ͕ٛෳࡶʹґଘ͠߹͍ͬͯΔ • ʹ΋ؔΘΒͣɺάϩʔόϧͳ໊લۭ͔ؒ͠ͳ͍

    • ͭ·ΓɺҰͭͷڊେͳґଘؔ܎ͷπϦʔΛѻΘͳ͚Ε͹ͳΒͳ͍ 
 άϩʔόϧม਺͔͠࢖͑ͳ͍ϓϩάϥϛϯάݴޠͰιϑτ΢ΤΞΛ։ൃ͢Δ Α͏ͳ΋ͷ ※ ΋ͪΖΜɺCSS Λॻ͘Ϣʔβʔࣗ਎ͷεΩϧෆ଍΍ɺϓϩδΣΫτʹ͓͚ΔυΩϡϝϯτෆ଍ͳͲʹ΋ݪҼ͸͋Γ·͢ɻ
  3. ࣮૷ྫ 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 ϓϥάΠϯͷॲཧΛڬΉ͜ͱ΋Ͱ͖Δɻ
  4. ࣮૷ྫ 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 ʹͳ͍ͬͯΔɻ
  5. CSS in JS ͷಛ௃ 1. ελΠϧఆٛΛ JS ͷϩʔΧϧม਺ʹด͡ࠐΊΔ͜ͱͰɺଞͷελΠϧ͔Βͷҙ ਤ͠ͳ͍ԚછΛ๷͙͜ͱ͕Ͱ͖Δɻ ʹ

    ίϯϙʔωϯτ୯ҐͰϩʔΧϧείʔϓʹͳΔɻ 2. ΠϯϥΠϯελΠϧΛ࢖͏͜ͱͰɺৄࡉ౓͕ҰఆʹͳΔɻ ʹ ΧεέʔσΟϯάΛؾʹ͠ͳͯ͘ࡁΉΑ͏ʹͳΔɻ
  6. CSS in JS ͷ໰୊఺ ελΠϧΛશͯΠϯϥΠϯʹల։͢Δ = ΠϯϥΠϯελΠϧͷ੍໿Λड͚Δ • ٖࣅΫϥεʢ:hoverɺ:nth-childɺ:not ͳͲʣ

    • ϝσΟΞΫΤϦ • CSS Ξχϝʔγϣϯ ͳͲ͕࢖͑ͳ͍ɻ ※ :hover ͳͲҰ෦ͷٖࣅΫϥε΍ ϝσΟΞΫΤϦ ʹ͍ͭͯ͸ɺؤுͬͯରԠ͍ͯ͠Δ࣮૷ϥΠϒϥϦ΋͋Δɻ :hover → onMouseEnter / onMouseLeave :focus → onFocus / onBlur ϝσΟΞΫΤϦ → window.matchMedia
  7. ࣮૷ྫ 1. ίϯϙʔωϯτ͝ͱͷελΠϧΛ CSS Ͱॻ͘ .normal { /* all styles

    for Normal */ } .primary { /* all styles for Primary */ } components/button.css JS in CSS ͱ͸ҟͳΓɺελΠϧఆٛ͸ CSS Ͱॻ͘͜ͱ͕Ͱ͖Δɻ
  8. ࣮૷ྫ 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
  9. ࣮૷ྫ 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 Ͱ΋ՄೳͬΆ͍ɻʣ
  10. 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
  11. 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
  12. άϩʔόϧείʔϓ ࣗಈม׵ͤͣ͞ʹɺ͜Ε·Ͱ௨Γάϩʔόϧείʔϓʹ͍ͨ͠৔߹͸ :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
  13. CSS Modules ͷॴײ • ҰҙͱͳΔΫϥε໊ʹ͢Δͱ͍͏ϩʔΧϧείʔϓͷ࢓૊Έࣗମ͸ɺBEM ͳͲ ͷ໋໊نଇΛ΋ͱʹࣗ෼ͰΫϥε໊Λ͚ͭΔͷͱ΍͍ͬͯΔ͜ͱ͸มΘΒͳ͍ɻ • composition ΋

    Sass ͷ @extend ͱมΘΒͳ͍ɻ • ैͬͯɺBEM ΍ SMACSS ͳͲ͜Ε·Ͱͷ CSS ઃܭख๏Ͱ͏·͍͍ͬͯ͘Δ৔ ߹͸ɺ͋͑ͯಋೖ͢Δඞવੑ͸ͳ͍͔΋͠Εͳ͍ɻ • Ͱ΋ࣗಈͰ BEM ͬΆ͍Ϋϥε໊Λੜ੒ͯ͘͠ΕΔͷ͸خ͍͠ɻʮ΍΍໋͍͜͠ ໊نଇͰΫϥε໊Λߟ͑Δͷ͸໘౗ͩʯͱ͍͏ਓʹ͸ͪΐ͏Ͳ͍͍͔΋ɻ
  14. Ͱ΋Ͷɾɾɾ • ࠷΋ॏཁͳͷ͸ʮ͖Ε͍ͳίϯϙʔωϯτઃܭ͕Ͱ͖Δ͔Ͳ͏͔ʯͩͱࢥ͏ɻ • ͦΕ͕Ͱ͖͍ͯͳ͍ͱɺͨͱ͑ CSS Modules Λ࢖ͬͨͱͯ͠΋ɺଞͷελΠϧ Λ composes

    ͠·ͬͯ͘ɺ݁ہʮյΕ΍͍͢ CSSʯʹͳͬͯ͠·͏ɻ • ٯʹɺͦΕ͑͞Ͱ͖͍ͯ͑͞Ε͹ɺBEM Ͱ΋ CSS Modules Ͱ΋ԿͰ΋ߏΘͳ ͍ɻ • ݸਓతʹ͸ɺͲ͏͢Ε͹͖Ε͍ʹίϯϙʔωϯτ෼ׂͰ͖Δ͔ͱ͍͏͜ͱͰɺ೔ʑ ೰ΜͰ͓Γ·͢ɻ
  15. ·ͱΊ • CSS in JS ͸࢖͑ͳ͍͚ͲͦͷޙͷӨڹΛߟ͑Δͱྺ࢙తͳҙٛ͸େ͖͍ɻ • CSS Modules ͸ͳ͔ͳ͔ྑ͛͞ɻಛʹ

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