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
220
CSSモジュール ― 明るい未来へようこそ / techcamp02
第2回開発合宿(2016/08/14)
Yuichi Goto
August 14, 2016
Tweet
Share
More Decks by Yuichi Goto
See All by Yuichi Goto
[Teaser] Type-Safe Lightweight DDD with Effect Schema
yasaichi
2
330
Google Cloud を用いたソフトウェア開発の内製化組織の早期立ち上げの実現 / Rapid Establishment of In-House Software Development Teams Using Google Cloud
yasaichi
1
1.4k
[EN] Robust and Scalable API Gateway Built on Effect
yasaichi
3
300
Effectで作る堅牢でスケーラブルなAPIゲートウェイ / Robust and Scalable API Gateway Built on Effect
yasaichi
9
2.3k
あるRailsエンジニアがビジネスリーダーに転身するまで
yasaichi
8
3k
Active Recordから考える次の10年を見据えた技術選定 / Architecture decision for the next 10 years at PIXTA
yasaichi
50
22k
Active Recordから考える次世代のRuby on Railsの方向性 / Directions for the next generation of Ruby on Rails: From the viewpoint of its Active Record
yasaichi
38
21k
ピクスタのエンジニアリングとCircleCI / Software Engineering with CircleCI at PIXTA
yasaichi
1
440
Ruby on Railsの正体と向き合い方 / What is Ruby on Rails and how to deal with it?
yasaichi
144
92k
Other Decks in Technology
See All in Technology
赤煉瓦倉庫勉強会「Databricksを選んだ理由と、絶賛真っ只中のデータ基盤移行体験記」
ivry_presentationmaterials
2
370
AI エージェントと考え直すデータ基盤
na0
11
3.2k
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
6
13k
United™️ Airlines®️ Customer®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedguide
0
240
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
2k
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
2
270
面倒な作業はAIにおまかせ。Flutter開発をスマートに効率化
ruideengineer
0
270
第4回Snowflake 金融ユーザー会 Snowflake summit recap
tamaoki
1
300
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
7.9k
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
2
17k
【Oracle Cloud ウェビナー】インフラのプロフェッショナル集団KELが考えるOCIでのソリューション実現
oracle4engineer
PRO
1
100
AI時代の開発生産性を加速させるアーキテクチャ設計
plaidtech
PRO
3
160
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
KATA
mclloyd
30
14k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Documentation Writing (for coders)
carmenintech
72
4.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
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
͓ർΕ͞·Ͱͨ͠ʂ