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
110
Google Cloud を用いたソフトウェア開発の内製化組織の早期立ち上げの実現 / Rapid Establishment of In-House Software Development Teams Using Google Cloud
yasaichi
1
870
[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
400
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
Reading Code Is Harder Than Writing It
trishagee
2
120
PHPカンファレンス名古屋-テックリードの経験から学んだ設計の教訓
hayatokudou
2
530
抽象化をするということ - 具体と抽象の往復を身につける / Abstraction and concretization
soudai
27
14k
OpenID BizDay#17 みんなの銀行による身元確認結果の活用 / 20250219-BizDay17-KYC-minna-no-ginko
oidfj
0
210
エンジニアリング価値を黒字化する バリューベース戦略を用いた 技術戦略策定の道のり
kzkmaeda
6
1.5k
Helm , Kustomize に代わる !? 次世代 k8s パッケージマネージャー Glasskube 入門 / glasskube-entry
parupappa2929
0
290
Raycast Favorites × Script Command で実現するお手軽情報チェック
smasato
1
120
利用終了したドメイン名の最強終活〜観測環境を育てて、分析・供養している件〜 / The Ultimate End-of-Life Preparation for Discontinued Domain Names
nttcom
2
360
わたしがEMとして入社した「最初の100日」の過ごし方 / EMConfJp2025
daiksy
13
3.6k
(機械学習システムでも) SLO から始める信頼性構築 - ゆる SRE#9 2025/02/21
daigo0927
0
240
LINEギフトにおけるバックエンド開発
lycorptech_jp
PRO
0
180
The Future of SEO: The Impact of AI on Search
badams
0
260
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
693
190k
Producing Creativity
orderedlist
PRO
344
40k
Git: the NoSQL Database
bkeepers
PRO
427
65k
Fireside Chat
paigeccino
34
3.2k
Designing Experiences People Love
moore
140
23k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
GraphQLとの向き合い方2022年版
quramy
44
13k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
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
͓ർΕ͞·Ͱͨ͠ʂ