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
styled-componentsで脱CSSModules
Search
camcam_lemon
March 06, 2019
Programming
3
780
styled-componentsで脱CSSModules
Meguro.css #5 @ oRo での登壇資料です
camcam_lemon
March 06, 2019
Tweet
Share
More Decks by camcam_lemon
See All by camcam_lemon
オレを実装してデザイン実装楽したい
lemon
0
39
要素のサイズを変えずに押しやすくする
lemon
0
70
iOSのキーボード入力ビューをカスタマイズする
lemon
0
240
視え方と文字の大きさ
lemon
1
400
Yarn WorkSpaces × React Nativeの環境構築
lemon
0
290
フロントエンドにおけるアーキテクチャとの向き合い方
lemon
10
4.9k
UI/UXデザイナーがデザインしてるもの
lemon
2
320
react-reduxで追加されたHooks APIの良い所と使い方
lemon
5
990
ESLintで始めるTypeScriptの静的解析
lemon
8
2.1k
Other Decks in Programming
See All in Programming
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
3
780
Bedrock AgentCore ObservabilityによるAIエージェントの運用
licux
8
560
decksh - a little language for decks
ajstarks
4
21k
JetBrainsのAI機能の紹介 #jjug
yusuke
0
180
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
430
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
7
1.7k
新しいモバイルアプリ勉強会(仮)について
uetyo
1
250
新世界の理解
koriym
0
130
AI Ramen Fight
yusukebe
0
120
DatadogのArchived LogsをSnowflakeで高速に検索する方法(Archive Searchでオワコンにならないことを祈って) / How to search Datadog Archived Logs quickly with Snowflake (hoping Datadog Archive Search doesn’t make this obsolete)
civitaspo
0
110
GitHub Copilotの全体像と活用のヒント AI駆動開発の最初の一歩
74th
6
1.8k
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
330
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
40
2k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
For a Future-Friendly Web
brad_frost
179
9.9k
Producing Creativity
orderedlist
PRO
346
40k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
420
Typedesign – Prime Four
hannesfritz
42
2.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.5k
KATA
mclloyd
31
14k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Transcript
styled-components で脱CSSModules Meguro.css #5 @ oRo
None
CSSModules(CSS, SASS, SCSS) のメンテナンスに 消耗していませんか?
消耗ポイント !important 変更したら他の箇所が崩れた webpackェ... 前書いたCSSがわからないぞ
CSSModulesはCSSの辛さを そのまま引き継ぐ CSSも全てJSで管理したい!! >
styled-components < >
styled-componentsの特徴 - 普通のCSSと同じ記法 - 擬似要素、擬似クラスなどの セレクタをほぼサポート - スタイリングの継承(mixin) - Propsで見た目を制御
さぁ移行するぞ!!!
定数
擬似クラス
継承
for文
多段ネスト
None
どう書き替えるか分からない 箇所が結構でてくる... 大規模なCSSほど 構造は複雑になりがち
- CSSセレクタの「>」と「&」 - styled-componentsの「attrs」 複雑なCSSの書き換えには この2つがとても重要
- 定義済みコンポーネントの拡張 - より動的で拡張的な コンポーネントを作れる - 高階関数、HOCみたいなもの styled-componentsの「attrs」
None
None
関数として評価される この関数の中でオブジェクトを返却する
返却されたオブジェクトがそのまま テンプレートリテラルの中に渡ってくる
None
- & : 親セレクタへの参照 - >: 子セレクタのみの適用 CSSセレクタの「&」と「>」 これ以外にも「~」や「+」があります ※
&は正確にはシンタックスシュガー
None
None
ul, ol, li要素共通のスタイル 定義をここでしている
olの中のli要素の中で 更に入れ子になっている olリストのスタイリング ulの中のli要素の中で 更に入れ子になっている ulリストのスタイリング
理想はこんな感じ propsで振舞いを変 更する方が直感的で 分かりやすい こちらの方が Reactらしさがある
まとめ - styled-componentsの表現力は sassやscssにも劣らない - 大規模なcssを一度に書き換えるのは難しい - 制御構文の書き換えにはattrs - 複雑なcssの書き換えにはセレクター
セレクターはprops制御に書き換えよう! -
ご静聴ありがとうございました!