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
180
CSSモジュール ― 明るい未来へようこそ / techcamp02
第2回開発合宿(2016/08/14)
Yuichi Goto
August 14, 2016
Tweet
Share
More Decks by Yuichi Goto
See All by Yuichi Goto
あるRailsエンジニアがビジネスリーダーに転身するまで
yasaichi
8
2.2k
Active Recordから考える次の10年を見据えた技術選定 / Architecture decision for the next 10 years at PIXTA
yasaichi
50
19k
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
320
Ruby on Railsの正体と向き合い方 / What is Ruby on Rails and how to deal with it?
yasaichi
139
85k
SSR以後の世界へ / techcamp05
yasaichi
3
1.5k
サービス開発の現場からOSSを生み出す思考技術 / genbaweb04
yasaichi
3
1.1k
Capybaraで変更に強いE2Eテストを書く / TokyuRubyKaigi12
yasaichi
6
2.1k
今更始めるGo言語 / techcamp04
yasaichi
0
2.9k
Other Decks in Technology
See All in Technology
Cloud Service Mesh に触れ合う
phaya72
1
120
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
4
37k
Cracking the KubeCon CfP
inductor
2
270
推しは推せるときに推せ! プロダクトにフィードバックしていこう
nakasho
0
450
アクセス制御にまつわる改善 / Improving access control
itkq
0
580
R3のコードから見る実践LINQ実装最適化・コンカレントプログラミング実例
neuecc
3
1.7k
今年のRubyKaigiはProfiler Year🤘
osyoyu
0
310
BPStudyの200回を中心にIT業界を振り返る。そしてこれから
haru860
3
390
web-application-security
matsuihidetoshi
1
190
ServiceNow Knowledge 24の歩き方 EYストラテジー・アンド・コンサルティング
manarobot
0
220
Azure犬駆動開発の記録/GlobalAzureFukuoka2024_20240420
nina01
1
230
AWS学習者向けにAzureの解説スライドを作成した話
handy
3
160
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
320
37k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.6k
Designing Experiences People Love
moore
136
23k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
117
18k
Producing Creativity
orderedlist
PRO
338
39k
A better future with KSS
kneath
231
16k
Docker and Python
trallard
35
2.7k
YesSQL, Process and Tooling at Scale
rocio
165
13k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
GraphQLとの向き合い方2022年版
quramy
33
12k
Building Adaptive Systems
keathley
32
1.9k
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
͓ർΕ͞·Ͱͨ͠ʂ