CSS in JS と CSS Modules

by Yoshihide Jimbo

Slide 1

Slide 1 text

CSS in JS ͱ CSS Modules Yoshihide Jimbo ng-kyoto Angular Meetup #3 | Nov 22, 2015

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

What is CSS?

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

← ← ←

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

CSS is too fragile CSS ͸յΕ΍͍͢

Slide 10

Slide 10 text

ͳͥʮCSS ͸յΕ΍͍͢ʯͷ͔ʁ ݪҼͷҰͭ͸ɺCSS ͷݴޠ࢓༷ͦͷ΋ͷʹ͋Δɻ • ΧεέʔσΟϯάʢಛʹৄࡉ౓ʣ͕෼͔Γʹ͍͘ • ͦΕͧΕͷελΠϧఆ͕ٛෳࡶʹґଘ͠߹͍ͬͯΔ • ʹ΋ؔΘΒͣɺάϩʔόϧͳ໊લۭ͔ؒ͠ͳ͍ • ͭ·ΓɺҰͭͷڊେͳґଘؔ܎ͷπϦʔΛѻΘͳ͚Ε͹ͳΒͳ͍   άϩʔόϧม਺͔͠࢖͑ͳ͍ϓϩάϥϛϯάݴޠͰιϑτ΢ΤΞΛ։ൃ͢Δ Α͏ͳ΋ͷ ※ ΋ͪΖΜɺCSS Λॻ͘Ϣʔβʔࣗ਎ͷεΩϧෆ଍΍ɺϓϩδΣΫτʹ͓͚ΔυΩϡϝϯτෆ଍ͳͲʹ΋ݪҼ͸͋Γ·͢ɻ

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

CSS in JS

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

react-style Λ࢖࣮ͬͨ૷ྫ

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

࣮૷ྫ 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 ʹͳ͍ͬͯΔɻ

Slide 19

Slide 19 text

࣮૷ྫ 3. ݁ՌɺҎԼͷ༷ͳ HTML ͕ग़ྗ͞ΕΔ HTML

Hello World!

Slide 20

Slide 20 text

CSS in JS ͷಛ௃

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

CSS in JS ͷ໰୊఺

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

ͭ·Γ CSS ͷඇྗͳ෦෼͸ JS ͰղܾͰ͖͍ͯΔ͕ɺ  CSS ͷύϫϑϧͳ෦෼͕٘ਜ਼ʹͳͬͯ͠·͍ͬͯΔɻ

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

࣮૷ྫ

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

࣮૷ྫ 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

Slide 31

Slide 31 text

࣮૷ྫ 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 Ͱ΋ՄೳͬΆ͍ɻʣ

Slide 32

Slide 32 text

Composition

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Composition Submit HTML ग़ྗ͞ΕΔ HTML ͸͜Μͳײ͡ɻ

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

άϩʔόϧείʔϓ

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

CSS Modules ͷಛ௃

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

CSS Modules ͷॴײ

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Ͱ΋Ͷɾɾɾ

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

·ͱΊ

Slide 45

Slide 45 text

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