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
210
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
1
100
Google Cloud を用いたソフトウェア開発の内製化組織の早期立ち上げの実現 / Rapid Establishment of In-House Software Development Teams Using Google Cloud
yasaichi
1
840
[EN] Robust and Scalable API Gateway Built on Effect
yasaichi
3
240
Effectで作る堅牢でスケーラブルなAPIゲートウェイ / Robust and Scalable API Gateway Built on Effect
yasaichi
8
1.8k
あるRailsエンジニアがビジネスリーダーに転身するまで
yasaichi
8
2.8k
Active Recordから考える次の10年を見据えた技術選定 / Architecture decision for the next 10 years at PIXTA
yasaichi
50
21k
Active Recordから考える次世代のRuby on Railsの方向性 / Directions for the next generation of Ruby on Rails: From the viewpoint of its Active Record
yasaichi
38
20k
ピクスタのエンジニアリングとCircleCI / Software Engineering with CircleCI at PIXTA
yasaichi
1
390
Ruby on Railsの正体と向き合い方 / What is Ruby on Rails and how to deal with it?
yasaichi
143
90k
Other Decks in Technology
See All in Technology
Postmanを使いこなす!2025年ぜひとも押さえておきたいPostmanの10の機能
nagix
2
120
スタートアップ1人目QAエンジニアが QAチームを立ち上げ、“個”からチーム、 そして“組織”に成長するまで / How to set up QA team at reiwatravel
mii3king
1
1.1k
テストアーキテクチャ設計で実現する高品質で高スピードな開発の実践 / Test Architecture Design in Practice
ropqa
3
710
スクラムのイテレーションを導入してチームの雰囲気がより良くなった話
eccyun
0
110
明日からできる!技術的負債の返済を加速するための実践ガイド~『ホットペッパービューティー』の事例をもとに~
recruitengineers
PRO
3
100
プロセス改善による品質向上事例
tomasagi
1
1.6k
まだ間に合う! エンジニアのための生成AIアプリ開発入門 on AWS
minorun365
PRO
4
580
技術的負債解消の取り組みと専門チームのお話 #技術的負債_Findy
bengo4com
1
1.2k
第13回 Data-Centric AI勉強会, 画像認識におけるData-centric AI
ksaito_osx
0
360
High Performance PHP
cmuench
0
140
APIファーストで実現する運用性の高い IoT プラットフォーム: SORACOMのアプローチ
soracom
PRO
0
240
現場の種を事業の芽にする - エンジニア主導のイノベーションを事業戦略に装着する方法 -
kzkmaeda
2
1.5k
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
The Language of Interfaces
destraynor
156
24k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
A Tale of Four Properties
chriscoyier
158
23k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Speed Design
sergeychernyshev
25
780
A better future with KSS
kneath
238
17k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
8
270
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
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
͓ർΕ͞·Ͱͨ͠ʂ