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

CSSモジュール ― 明るい未来へようこそ / techcamp02

B8e501d93b98a553abf0b5cee0c33503?s=47 yasaichi
August 14, 2016
Technology
0
150

CSSモジュール ― 明るい未来へようこそ / techcamp02

第2回開発合宿（2016/08/14）

B8e501d93b98a553abf0b5cee0c33503?s=128

yasaichi

August 14, 2016
Tweet

More Decks by yasaichi

See All by yasaichi
B8e501d93b98a553abf0b5cee0c33503?s=48 yasaichi
31
9.7k
B8e501d93b98a553abf0b5cee0c33503?s=48 yasaichi
1
200
B8e501d93b98a553abf0b5cee0c33503?s=48 yasaichi
117
60k
B8e501d93b98a553abf0b5cee0c33503?s=48 yasaichi
3
1k
B8e501d93b98a553abf0b5cee0c33503?s=48 yasaichi
3
560
B8e501d93b98a553abf0b5cee0c33503?s=48 yasaichi
5
690
B8e501d93b98a553abf0b5cee0c33503?s=48 yasaichi
0
2.6k
B8e501d93b98a553abf0b5cee0c33503?s=48 yasaichi
1
3k
B8e501d93b98a553abf0b5cee0c33503?s=48 yasaichi
3
1.3k

Other Decks in Technology

See All in Technology
3f0d60d6727ea76dfc9f7863f8e035c4?s=48 aizurage
0
120
Fb025419ed38f98df595eb2eafc859f4?s=48 ihcomega56
2
810
7cd783377515bdf8207062840b7b2f4e?s=48 soracom
0
220
7e6a435700dda6cdb22105d601f20892?s=48 picardparis
4
2.4k
700669515ee872152d8b9403c2a0cf8c?s=48 kazeburo
1
120
Ad2155c75c67c0100dd008ad10858de5?s=48 legalforce
PRO
0
160
272ea9518ccdb2ed71b73ac87b7901f8?s=48 hponka
0
1.2k
462feb0fe0493c40d55650da664e8773?s=48 clustervr
PRO
0
120
17e27e023d9616b72b9e4426533fffc6?s=48 kema1015
0
560
45a72486b4481b73b963a74ecaefc76f?s=48 kadoppe
1
150
3373c144fef1d3518b9b3f24a6b46ad0?s=48 lmi
5
3.5k
53850955f15249a1a9dc49df6113e400?s=48 line_developers
PRO
1
140

Featured

See All Featured
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
32
3.5k
170b760e0147792d0140e59ec78e9893?s=48 eitanlees
115
10k
719435d98d452de7ac367c828266cf01?s=48 erikaheidi
14
4.5k
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
221
15k
651dcfe41723207fbb0aa044a4f7c07f?s=48 dotmariusz
94
5.5k
Aebc2d07a50011e2a30d38435fde564a?s=48 jrom
116
7.2k
1f74b13f1e5c6c69cb5d7fbaabb1e2cb?s=48 sferik
613
55k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
232
18k
282d599b414022eba5096510f675b6e2?s=48 chrislema
173
14k
F29327647a9cff5c69618bae420792ea?s=48 tenderlove
54
3.5k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
312
21k
168ccec72eee0530b818d44f3fedaacf?s=48 shlominoach
176
7.6k

Transcript

  1. CSSϞδϡʔϧ ― ໌Δ͍ະདྷ΁Α͏ͦ͜ ୈ2ճ։ൃ߹॓੒Ռൃදɹ@yasaichi

  2. ൃදߏ੒ 1. എܠͱ໨త 2. ख๏֓ཁ 3. ࣮ࡍʹ࢖ͬͯΈͨ 4. ॴײ

  3. എܠͱ໨త

  4. എܠ: CSS Modules • ҎԼΛಡΜͰCSS ModulesʹڵຯΛ࣋ͭ • State of React

    and CSS • CSSϞδϡʔϧ ― ໌Δ͍ະདྷ΁Α͏ͦ͜ ʢ͜ͷεϥΠυͷλΠτϧͷݩωλʣ • Modular CSS with React

  5. CSSʹରͯ͠ͷΞϯςφ͕
 ߴ·ͬͨঢ়ଶʹ

  6. എܠ: PostCSS • ͞ΒʹҎԼΛಡΜͰPostCSSͱ͍͏ಈ͖͕͋Δ ͜ͱΛ஌Δ • morishitterͷCSSͷॻ͖ํʢ2016೥Նʣ • [ৄղ] ϞμϯCSS:

    ه๏ɼελΠϧͷ؅ཧɼ PostCSSʢWEB+DB PRESS Vol.93ʣ

  7. ࠓճͷ߹॓ͷ໨త • ର৅ɿhttps://github.com/yasaichi/ minesweeper-reactjs • CSS ModulesΛ࢖ͬͯCSSΛॻ͍ͯΈΔ • PostCSSΛ࢖ͬͯCSSͷ "τϥϯεύΠϧ"

    ʢCSS to CSSʣΛମݧ͢Δ

  8. ख๏֓ཁ

  9. CSS Modules • CSSͷ৽͍͠ઃܭ֓೦ or ࢦ਑ • ϧʔϧηοτͷӨڹൣғΛίϯϙʔωϯτ
 ୯ҐͰดͯ͡͠·͓͏ͱ͍͏ͷ͕ओͳߟ͑ •

    BEMͳͲͷઃܭख๏Λ࢖Θͣʹࡶʹॻ͍ͯ΋ ·͋·͋ഁ୼͠ʹ͍͘CSS͕ಘΒΕΔ

  10. αϯϓϧ import React from 'react'; import styles from './style.css'; export

    default class Logo extends React.Component { render() { return <div className={styles.square} />; } }; /* style.css */ .square { width: 200px; height: 200px; }

  11. build͢Δͱ ._1uhuc_qi65HzMlHqmlWStu { width: 200px; height: 200px } <!DOCTYPE html>

    <html> <body> <div id="container"> <div data-reactroot="" class="_1uhuc_qi65HzMlHqmlWStu"></div> </div> </body> </html> React ComponentʹରԠ ͢Δclass͕ద༻͞ΕΔ άϩʔόϧۭؒͰҰҙͳ Ϋϥε໊ʹม׵͞ΕΔ

  12. PostCSS • "PostCSS is a tool for transforming styles with

    JS plugins"ʢGitHubͷϦϙδτϦΑΓʣ • ௒ͬ͘͟Γݴ͏ͱCSSʹ͓͚ΔBabel • Babelͱಉ༷ʹ͞·͟·ͳϓϥάΠϯ͕͋Δ
 ʢe.g. Autoprefixer, cssnext ͳͲʣ

  13. ࣮ࡍʹ࢖ͬͯΈͨ

  14. ߹॓Ҏલͷminesweeper • Ұ೥લ͘Β͍ʹReactͷษڧ͕ͯΒ࡞ͬͨ • React (0.13.3) • Gulp • Browserify

    • Radium

  15. σϞʢͦͷ1ʣ

  16. ߹॓ޙͷminesweeper • 2016೥ͬΆ͍ײ͡ʹΞοϓσʔτ • React (15.3.0) • npm-scripts • webpack

    • CSS Modules + cssnext + PostCSS

  17. σϞʢͦͷ2ʣ

  18. ॴײ

  19. ໌Δ͍ະདྷʁ • CSSͷʢະདྷͷʣඪ४͕ऑ͍ͷͰॻ͍͍ͯͯ
 ਏ͍৔໘͕͋Δʢe.g. eachతͳͷ࢖͍͍ͨʣ • σόοάͷͨΊͷ͍͍࢓૊Έ͕·ͩͳ͍ • ݪ୊͸”CSS Modules:

    Welcome to the Future” -> ະདྷ͕໌Δ͍ͱ͸Ұݴ΋ʢry

  20. ͓ർΕ͞·Ͱͨ͠ʂ