Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSSモジュール ― 明るい未来へようこそ / techcamp02
Search
Yuichi Goto
August 14, 2016
Technology
0
190
CSSモジュール ― 明るい未来へようこそ / techcamp02
第2回開発合宿(2016/08/14)
Yuichi Goto
August 14, 2016
Tweet
Share
More Decks by Yuichi Goto
See All by Yuichi Goto
[EN] Robust and Scalable API Gateway Built on Effect
yasaichi
3
120
Effectで作る堅牢でスケーラブルなAPIゲートウェイ / Robust and Scalable API Gateway Built on Effect
yasaichi
8
1.5k
あるRailsエンジニアがビジネスリーダーに転身するまで
yasaichi
8
2.5k
Active Recordから考える次の10年を見据えた技術選定 / Architecture decision for the next 10 years at PIXTA
yasaichi
50
20k
Active Recordから考える次世代のRuby on Railsの方向性 / Directions for the next generation of Ruby on Rails: From the viewpoint of its Active Record
yasaichi
38
19k
ピクスタのエンジニアリングとCircleCI / Software Engineering with CircleCI at PIXTA
yasaichi
1
340
Ruby on Railsの正体と向き合い方 / What is Ruby on Rails and how to deal with it?
yasaichi
140
86k
SSR以後の世界へ / techcamp05
yasaichi
3
1.6k
サービス開発の現場からOSSを生み出す思考技術 / genbaweb04
yasaichi
3
1.1k
Other Decks in Technology
See All in Technology
データ分析基盤を作ってみよう~設計編~
nrinetcom
PRO
1
110
Amazon FSx for NetApp ONTAPのパフォーマンスチューニング要素をまとめてみた #cm_odyssey #devio2024
non97
0
220
Matterport を使ってクラスメソッド各拠点のバーチャルオフィスツアーを作成してみた
wakatsuki
0
160
セキュリティ研修 Day1【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
データベース研修 分析向けSQL入門【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
110
サービスの持続的な成長と技術負債について
siva_official
PRO
10
4.4k
Flutter研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
Git 研修 Basic【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
310
DDDにおける認可の扱いとKotlinにおける実装パターン / authorization-for-ddd-and-kotlin-implement-pattern
urmot
4
390
What is DRE? - Road to SRE NEXT@広島
chanyou0311
3
630
DevIO2024_レガシー運用からの脱却 -クラウド活用の実践事例とベストプラクティス-
jun2882
0
210
コンテナ・K8s研修 - 前半 コンテナ基礎・ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
Featured
See All Featured
Side Projects
sachag
451
42k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
149
45k
Designing Experiences People Love
moore
136
23k
The Invisible Side of Design
smashingmag
294
50k
How STYLIGHT went responsive
nonsquared
93
5k
The Language of Interfaces
destraynor
151
23k
Done Done
chrislema
179
15k
Testing 201, or: Great Expectations
jmmastey
33
6.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
Become a Pro
speakerdeck
PRO
15
4.8k
Robots, Beer and Maslow
schacon
PRO
157
8.1k
Building Flexible Design Systems
yeseniaperezcruz
323
37k
Transcript
CSSϞδϡʔϧ ― ໌Δ͍ະདྷΑ͏ͦ͜ ୈ2ճ։ൃ߹॓Ռൃදɹ@yasaichi
ൃදߏ 1. എܠͱత 2. ख๏֓ཁ 3. ࣮ࡍʹͬͯΈͨ 4. ॴײ
എܠͱత
എܠ: CSS Modules • ҎԼΛಡΜͰCSS ModulesʹڵຯΛ࣋ͭ • State of React
and CSS • CSSϞδϡʔϧ ― ໌Δ͍ະདྷΑ͏ͦ͜ ʢ͜ͷεϥΠυͷλΠτϧͷݩωλʣ • Modular CSS with React
CSSʹରͯ͠ͷΞϯςφ͕ ߴ·ͬͨঢ়ଶʹ
എܠ: PostCSS • ͞ΒʹҎԼΛಡΜͰPostCSSͱ͍͏ಈ͖͕͋Δ ͜ͱΛΔ • morishitterͷCSSͷॻ͖ํʢ2016Նʣ • [ৄղ] ϞμϯCSS:
ه๏ɼελΠϧͷཧɼ PostCSSʢWEB+DB PRESS Vol.93ʣ
ࠓճͷ߹॓ͷత • ରɿhttps://github.com/yasaichi/ minesweeper-reactjs • CSS ModulesΛͬͯCSSΛॻ͍ͯΈΔ • PostCSSΛͬͯCSSͷ "τϥϯεύΠϧ"
ʢCSS to CSSʣΛମݧ͢Δ
ख๏֓ཁ
CSS Modules • CSSͷ৽͍͠ઃܭ֓೦ or ࢦ • ϧʔϧηοτͷӨڹൣғΛίϯϙʔωϯτ ୯ҐͰดͯ͡͠·͓͏ͱ͍͏ͷ͕ओͳߟ͑ •
BEMͳͲͷઃܭख๏ΛΘͣʹࡶʹॻ͍ͯ ·͋·͋ഁ͠ʹ͍͘CSS͕ಘΒΕΔ
αϯϓϧ 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; }
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͕ద༻͞ΕΔ άϩʔόϧۭؒͰҰҙͳ Ϋϥε໊ʹม͞ΕΔ
PostCSS • "PostCSS is a tool for transforming styles with
JS plugins"ʢGitHubͷϦϙδτϦΑΓʣ • ͬ͘͟Γݴ͏ͱCSSʹ͓͚ΔBabel • Babelͱಉ༷ʹ͞·͟·ͳϓϥάΠϯ͕͋Δ ʢe.g. Autoprefixer, cssnext ͳͲʣ
࣮ࡍʹͬͯΈͨ
߹॓Ҏલͷminesweeper • Ұલ͘Β͍ʹReactͷษڧ͕ͯΒ࡞ͬͨ • React (0.13.3) • Gulp • Browserify
• Radium
σϞʢͦͷ1ʣ
߹॓ޙͷminesweeper • 2016ͬΆ͍ײ͡ʹΞοϓσʔτ • React (15.3.0) • npm-scripts • webpack
• CSS Modules + cssnext + PostCSS
σϞʢͦͷ2ʣ
ॴײ
໌Δ͍ະདྷʁ • CSSͷʢະདྷͷʣඪ४͕ऑ͍ͷͰॻ͍͍ͯͯ ਏ͍໘͕͋Δʢe.g. eachతͳͷ͍͍ͨʣ • σόοάͷͨΊͷ͍͍Έ͕·ͩͳ͍ • ݪ”CSS Modules:
Welcome to the Future” -> ະདྷ͕໌Δ͍ͱҰݴʢry
͓ർΕ͞·Ͱͨ͠ʂ