React で CSS カプセル化の可能性を考える
•
3 likes•4,238 views
2016/10/15 秋の JavaScript 祭 in mixi でのスライドです。 https://vwxyutarooo.github.io/slide-js-fes_161015/#/
Recommended
More Related Content
What's hot
What's hot (19)
Similar to React で CSS カプセル化の可能性を考える
Similar to React で CSS カプセル化の可能性を考える (20)
React で CSS カプセル化の可能性を考える
- 1. 秋のJavaScript 祭in mixi React で CSS カプセル化の可能性を考える
- 10. フロントエンド意外お断り
- 12. ShadowDOM(ShadowBoundary) <div> <style> .title { color: #444; } </style> <h3 class="title">Item name</h3> </div>
- 13. ScopedCSS <div> <style scoped> .title { color: #444; } </style> <h3 class="title">Item name</h3> </div>
- 15. Emulated @Component({ selector: 'my-app', encapsulation: ViewEncapsulation.Emulated, styles: [` .test { padding: 10px; } `], template: ` <div class="test">Test</div> ` }) <body> <my-app _nghost-cmy-1=""> <div _ngcontent-cmy-1="" class="test">Test</div> </my-app> </body> .test[_ngcontent-cmy-1] { padding: 10px; }
- 16. Native =ShadowDOM <body> <my-app> ▾ #shadow-root <style> .test { padding: 10px; } </style> <div class="test"> <div>Test</div> </div> </my-app> </body>
- 17. <my-tag> <h3>{ opts.title }</h3> <style scoped> :scope { display: block; border: 2px } h3 { color: blue } </style> </my-tag> ↓ <style> my-tag { display: block; border: 2px } my-tag h3 { color: blue } </style>
- 19. vue‑loader
- 20. <style scoped> .example { color: red; } </style> <template> <div class="example">hi</div> </template> ↓ <style> .example[_v-f3f3eg9] { color: red; } </style> <template> <div class="example" _v-f3f3eg9>hi</div> </template>
- 25. 可能性その1 CSSinJS
- 26. CSS in JS const styles = { root: { color: color || avatar.color, backgroundColor: backgroundColor || avatar.backgroundColor, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: size / 2, borderRadius: '50%', height: size, width: size } }; return( <div style={ styles.root }></div> );
- 28. ない
- 29. ない
- 30. ない
- 31. ない
- 32. ない
- 33. ない
- 34. ない
- 35. ない
- 36. ない
- 37. ない
- 38. キモい
- 39. 嫌だ
- 40. ない
- 41. ごめん
- 42. 言いすぎた
- 43. CSS in JS の問題 擬似クラス(:hover,:before,:after) メディアクエリ CSSアニメーション シンタックス
- 44. CSS in JS 系リポジトリ cssinjs/jss cssinjs/react‑jss FormidableLabs/radium martinandert/react‑inline smyte/jsxstyle
- 45. var Radium = require('radium'); var React = require('react'); var color = require('color'); @Radium class Button extends React.Component { render() { return ( <button style={[ styles.base, styles[this.props.kind] ]}></button> ); } } var styles = { base: { color: '#fff', ':hover': { background: color('#0074d9').lighten(0.2).hexString() } }, ... };
- 48. (因みに) こうなった @charset 'utf-8'; @import 'core/config'; .datepicker, .timepicker { font-size: 12px !important; display: block !important; overflow: hidden; width: 100px !important; height: auto !important; border-width: 0 !important; > div { &:first-child { line-height: inherit !important; width: auto !important; height: auto !important; } } input { line-height: 2 !important; height: 36px !important; padding: 0 10px !important; text-align: center; color: $colorFont !important; border: 1px solid #ccc !important; background-color: #fff !important; }
- 49. 可能性その2 CSSModule
- 51. /* volume-slide.scss */ .slider { position: relative; height: 100%; &__track { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; margin: auto 0; background-color: rgba(255,255,255, .2); } &__handle { position: absolute; top: 0; bottom: 0; left: 0; margin: auto; cursor: pointer; border-radius: 50px; background-color: #fff; &:before { position: absolute; top: 0; bottom: 0;
- 52. // volume-slider.react.js import styles from './volume-slider.scss'; render: <slider className={ styles.slider }> <div className={ styles.slider__track + ' ' + styles.black }></div> <div className={ classnames(styles.slider__handle, styles.black) }></div </slider> 出力: <slider class="volume-slider__slider___2qmBE"> <div class="volume-slider__slider__track___1Okwk volume-slider__black___3-0A8" <div class="volume-slider__slider__handle___X_x8Q volume-slider__black___3-0A8" </slider> ファイル名__クラス名__5桁のハッシュ
- 59. React CSS Modules は クラス名はスネークケースもいけるよ classNameにstyleオブジェクト付けなくていいよ グローバル,ローカルスコープのクラスが一目瞭然だよ 定義してないクラスにエラー吐くよ
- 60. // volume-slider.react.js import CSSModules from 'react-css-modules'; import styles from './volume-slider.scss'; render: <div styleName="slider"> <div styleName="slider__track"></div> <div styleName="slider__handle"> </div> </div> export default CSSModules(VolumeSlider, styles); 出力: <div class="volume-slider__slider___2qmBE"> <div class="volume-slider__slider__track___1Okwk volume-slider__black___3-0A8" <div class="volume-slider__slider__handle___X_x8Q"></div> </div>
- 61. グローバルなクラス=className render: <div className="global-css-class" styleName="slider"> <div styleName="slider__track"></div> <div styleName="slider__handle"> </div> </div>
- 62. ES7Decoratorがおすすめ @CSSModules(styles, { allowMultiple: true }) export default class VolumeSlider extends React.Component {}
- 67. 結論 Reactには無い
- 68. ただし
- 70. import Select from 'react-select'; // Be sure to include styles at some point, probably during your bootstrapping import 'react-select/dist/react-select.css'; react‑select・react‑spinner・react‑slider
- 73. まとめ: React で CSS カプセル化は... 実用レベルであり 配布する時はCustomElement風 末端での利用ならばreact-css-module